/* =========================================================
   Web Development Montréal — « Ligne orange » v2
   Shared design system. Every page links this file.
   Fonts (Google Fonts, load in <head>):
   Archivo:wdth,wght@62..125,400..800 · IBM Plex Mono:400;500
   ========================================================= */

:root{
  /* colour */
  --ink:#151617;          /* main dark ground, body text on light */
  --ink-2:#0E0F10;        /* deeper: utility bar, footer */
  --ink-3:#1F2022;        /* raised dark surfaces, ghost numerals */
  --paper:#F4F2EC;        /* main light ground, text on dark */
  --paper-2:#FBFAF7;      /* cards on paper, hover */
  --stone:#E7E3DA;        /* alternate light section */
  --stone-2:#D6D2C8;      /* skeleton bars, dividers on stone */
  --orange:#F08123;       /* signature: lines, blocks, big numbers. Never small text on light */
  --orange-hover:#F39441;
  --muted-light:#4D4A44;  /* secondary text on paper/stone  (7.6:1 on paper) */
  --muted-dark:#C9C7C1;   /* secondary text on ink           (11:1 on ink) */
  --muted-dark-2:#A8A6A0; /* tertiary text on ink            (7.4:1 on ink) */
  --line-light:rgba(21,22,23,.16);
  --line-dark:rgba(244,242,236,.12);

  /* type */
  --f-sans:'Archivo',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --wide:112%;            /* font-stretch for display type */

  /* layout */
  --max:1320px;
  --gutter:56px;
  --sec:136px;            /* section padding, desktop */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ink)}
.page{font-family:var(--f-sans);font-size:17px;line-height:1.55;color:var(--paper);background:var(--ink);overflow-x:hidden}
a{color:inherit}a:hover{color:inherit}
img{max-width:100%}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.light :focus-visible,.orange :focus-visible{outline-color:var(--ink)}

/* ---------- surfaces ---------- */
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.stone{background:var(--stone);color:var(--ink)}
.orange{background:var(--orange);color:var(--ink)}
.deep{background:var(--ink-2);color:var(--paper)}
.grid-bg{background-image:linear-gradient(rgba(244,242,236,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,.045) 1px,transparent 1px);background-size:88px 88px;background-position:-1px -1px}
.bt{border-top:1px solid var(--line-light)}
.dark .bt,.deep .bt{border-top-color:var(--line-dark)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-sm{padding-top:96px;padding-bottom:96px}
.g{display:grid;gap:80px}
.g-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.g-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-6-6{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.g-8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.end{align-items:end}.center{align-items:center}.start{align-items:start}
.sticky{position:sticky;top:128px}
.stack-s>*+*{margin-top:12px}.stack-m>*+*{margin-top:24px}.stack-l>*+*{margin-top:40px}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}.mt-xl{margin-top:80px}

/* ---------- type ---------- */
.lab{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0;line-height:1.5}
.lab::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;border:4px solid var(--orange);box-sizing:border-box}
.orange .lab::before{border-color:var(--ink)}
.lab a{text-decoration:none}.lab a:hover{text-decoration:underline}
.mono{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.mono-o{color:var(--orange)}
.d-xl{margin:0;font-size:92px;line-height:.96;font-weight:700;font-stretch:116%;letter-spacing:-.04em}
.d-l{margin:0;font-size:76px;line-height:.98;font-weight:700;font-stretch:116%;letter-spacing:-.035em}
.h1{margin:0;font-size:68px;line-height:1;font-weight:700;font-stretch:var(--wide);letter-spacing:-.035em}
.h2{margin:0;font-size:52px;line-height:1.02;font-weight:700;font-stretch:var(--wide);letter-spacing:-.03em}
.h3{margin:0;font-size:30px;line-height:1.1;font-weight:700;font-stretch:110%;letter-spacing:-.02em}
.h4{margin:0;font-size:22px;line-height:1.2;font-weight:700;font-stretch:106%}
.lead{margin:0;font-size:20px;line-height:1.6}
.body{margin:0;font-size:17.5px;line-height:1.65}
.small{margin:0;font-size:15px;line-height:1.55}
.muted{color:var(--muted-light)}
.dark .muted,.deep .muted{color:var(--muted-dark)}
.muted-2{color:var(--muted-dark-2)}
.measure{max-width:640px}
.sample{font-family:var(--f-mono);font-size:.82em;letter-spacing:.02em;border:1.5px dashed currentColor;padding:1px 8px;white-space:nowrap}
.sample-o{border-color:var(--orange);color:var(--orange)}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 26px;font-family:inherit;font-weight:600;font-size:16.5px;line-height:1.2;text-decoration:none;cursor:pointer;border:0;transition:background-size .4s var(--ease-io),color .3s,border-color .3s}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-o{color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) no-repeat 0 0/0% 100%,var(--orange)}
.btn-o:hover{background-size:100% 100%;color:var(--ink)}
.btn-ink{color:var(--paper);background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 0/0% 100%,var(--ink)}
.btn-ink:hover{background-size:100% 100%;color:var(--ink)}
.btn-ghost{color:var(--paper);background:transparent;border:1.5px solid rgba(244,242,236,.35)}
.btn-ghost:hover{border-color:var(--paper);color:var(--paper)}
.btn-line{color:var(--ink);background:transparent;border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn-lg{min-height:72px;padding:0 36px;font-size:20px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1.5px;padding-bottom:3px;transition:background-size .35s var(--ease-io)}
.ul:hover{background-size:0% 1.5px;background-position:100% 100%}
.ulo{text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 100%/0% 2px;padding:8px 0;transition:background-size .35s var(--ease-io)}
.ulo:hover,.ulo[aria-current="page"]{background-size:100% 2px}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}
.more .arr{transition:transform .3s var(--ease)}
.more:hover .arr{transform:translateX(5px)}

/* ---------- header ---------- */
.util{background:var(--ink-2);border-bottom:1px solid rgba(244,242,236,.08)}
.util-in{height:38px;display:flex;align-items:center;gap:28px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted-dark-2)}
.hdr{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-dark)}
.hdr-in{height:80px;display:flex;align-items:center;gap:32px}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:15.5px;font-weight:500}
.navbtn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 0}
.navbtn .chev{transition:transform .3s}
.navbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px}
.lang .tag{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;border:1px solid rgba(244,242,236,.35);font-size:11px}
.burger{width:44px;height:44px;border:1.5px solid rgba(244,242,236,.4);background:transparent;display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0 11px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--paper);width:20px}
.burger span+span{width:12px;background:var(--orange)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line-light);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:megaIn .35s var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mitem{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;padding:16px;text-decoration:none;transition:background .25s}
.mitem:hover{background:var(--stone)}
.mitem img{width:72px;height:54px;display:block;transition:transform .35s var(--ease)}
.mitem:hover img{transform:translateY(-3px)}
.mitem b{display:block;font-weight:600;font-size:16.5px}
.mitem small{display:block;font-size:14px;line-height:1.45;color:var(--muted-light);margin-top:4px}
.mmenu{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;overflow:auto;animation:menuIn .45s var(--ease) both}
@keyframes menuIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.mmenu-top{height:64px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--line-dark)}
.mlink{display:flex;align-items:baseline;gap:16px;padding:18px 0;text-decoration:none;font-size:42px;line-height:1;font-weight:700;font-stretch:114%;letter-spacing:-.03em;border-bottom:1px solid var(--line-dark);animation:fadeIn .5s var(--ease) both}
.mlink span{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--orange)}
.mlink[aria-current="page"]{color:var(--orange)}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.phero-in{padding-top:88px;padding-bottom:104px}
.crumb{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted-dark-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--paper)}
.crumb .sep{color:var(--orange)}
.phero-art{position:relative;background:var(--paper);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.phero-art img{width:84%;height:auto;display:block}
.phero-art::after{content:"";position:absolute;right:-18px;bottom:-18px;width:42%;height:22%;background:var(--orange);z-index:-1}

/* ---------- reveal & motion ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;animation:lnUp 1s var(--ease) both}
@keyframes lnUp{from{transform:translateY(110%)}to{transform:none}}
.fadein{animation:fadeIn .9s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.float1{animation:float 7s ease-in-out infinite}
.float2{animation:float 8s ease-in-out -2s infinite}
.float3{animation:float 9s ease-in-out -4s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,129,35,.55)}100%{box-shadow:0 0 0 12px rgba(240,129,35,0)}}
.x{position:relative;white-space:nowrap;animation:dim .4s ease both;animation-delay:calc(var(--d) + .35s)}
.x::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:strike .55s var(--ease-io) forwards;animation-delay:var(--d)}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes dim{from{color:var(--paper)}to{color:#8F8D87}}
.fix{display:inline-block;background:var(--orange);color:var(--ink);padding:2px 12px 5px;animation:pop .6s var(--ease) both;animation-delay:1.6s}
@keyframes pop{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.swapA{animation:swapA 7s ease-in-out infinite}
.swapB{animation:swapB 7s ease-in-out infinite}
@keyframes swapA{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
@keyframes swapB{0%,42%{opacity:0;transform:translateY(8px)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
.knob{animation:knob 7s ease-in-out infinite}
@keyframes knob{0%,42%{transform:translateX(0)}50%,92%{transform:translateX(100%)}100%{transform:translateX(0)}}
.cursor{animation:cursor 7s ease-in-out infinite}
@keyframes cursor{0%,20%{transform:translate(60px,40px)}35%,45%{transform:translate(0,0)}55%,100%{transform:translate(60px,40px)}}
.mq{display:flex;width:max-content;animation:mq 46s linear infinite}
.mqbox:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq ul{list-style:none;margin:0;padding:0;display:flex;flex:none}
.mq li{display:flex;align-items:center;gap:18px;padding:0 36px;white-space:nowrap;font-size:18px;color:var(--muted-dark)}
.mq li::before{content:"";width:10px;height:10px;background:var(--orange)}
.mq strong{color:var(--paper)}

/* ---------- lists & rows ---------- */
.rows{list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding:40px 0;border-top:1px solid var(--line-light);transition:padding .4s var(--ease)}
.row:last-child{border-bottom:1px solid var(--line-light)}
.dark .row,.deep .row{border-color:var(--line-dark)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--orange);transition:width .6s var(--ease)}
.row:hover::before{width:100%}
.row:hover{padding-left:16px}
.row .n{font-family:var(--f-mono);font-size:14px;font-weight:500;padding-top:8px}
.check{list-style:none;margin:0;padding:0}
.check li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line-light);font-size:19px;line-height:1.45}
.check li:last-child{border-bottom:1px solid var(--line-light)}
.dark .check li{border-color:var(--line-dark)}
.check li::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;border:2px solid currentColor;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.2L12 4' fill='none' stroke='%23151617' stroke-width='2.4'/%3E%3C/svg%3E")}
.dark .check li::before{background-color:var(--orange);border-color:var(--orange)}
.check li:last-child::before{background-color:var(--orange)}
.bul{list-style:none;margin:0;padding:0}
.bul li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--line-light)}
.bul li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:12px;background:var(--orange)}
.dark .bul li{border-color:var(--line-dark)}
.no li::before{background:none;border:2px solid var(--muted-dark-2);width:14px;height:2px;border-width:2px 0 0;top:28px}

/* ---------- tiles ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(300px,auto);gap:16px}
.tile{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--paper);color:var(--ink);padding:32px;transition:transform .45s var(--ease),background .3s,box-shadow .45s}
.tile:hover{transform:translateY(-6px);background:var(--paper-2);box-shadow:0 18px 0 -10px rgba(21,22,23,.12)}
.tile .ill{transition:transform .5s var(--ease)}
.tile:hover .ill{transform:translate(-4px,-4px)}
.go{width:44px;height:44px;flex:none;border:1.5px solid rgba(21,22,23,.25);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.tile:hover .go{background:var(--orange);border-color:var(--orange)}
.tile-ink{background:var(--ink);color:var(--paper)}
.tile-ink:hover{background:#1E1F21}
.tile-ink .go{border-color:rgba(244,242,236,.3)}
.tile-o{background:var(--orange)}
.tile-o:hover{background:var(--orange-hover)}
.ghost-num{position:absolute;right:-24px;bottom:-60px;font-size:260px;line-height:1;font-weight:800;font-stretch:125%;color:var(--ink-3);letter-spacing:-.05em;pointer-events:none}
.card{background:var(--paper-2);color:var(--ink);padding:32px}
.card-ink{background:var(--ink);color:var(--paper);padding:36px}
.callout{border-left:6px solid var(--orange);padding:24px 28px;background:var(--paper-2);color:var(--ink)}
.dark .callout{background:var(--ink-3);color:var(--paper)}

/* ---------- process timeline (gantt) ---------- */
.ruler{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding-bottom:16px;border-bottom:1px solid rgba(244,242,236,.2)}
.weeks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--muted-dark-2)}
.prow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:32px 0;border-bottom:1px solid var(--line-dark);transition:background .3s}
.prow:hover{background:rgba(244,242,236,.03)}
.track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.track i{border-left:1px dashed rgba(244,242,236,.14)}
.track i:last-of-type{border-right:1px dashed rgba(244,242,236,.14)}
.bar{position:absolute;top:50%;height:10px;margin-top:-5px;background:var(--orange);transform-origin:left}
.stn{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--ink);border:5px solid var(--paper)}
.term{position:absolute;top:50%;right:0;width:44px;height:44px;margin:-22px -22px 0 0;background:var(--orange);display:flex;align-items:center;justify-content:center;animation:pulse 2.4s ease-out infinite}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid rgba(21,22,23,.2)}
.dark .faq details{border-color:var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;font-size:22px;font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.pm{flex:none;width:44px;height:44px;border:1.5px solid rgba(21,22,23,.3);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:400;transition:transform .35s var(--ease),background .3s}
.dark .pm{border-color:rgba(244,242,236,.35)}
.faq summary:hover .pm{border-color:currentColor}
.faq details[open] .pm{transform:rotate(45deg);background:var(--orange);border-color:var(--orange);color:var(--ink)}
.faq .ans{margin:0;padding:0 68px 32px 0;font-size:17px;line-height:1.65}
.faq details[open] .ans{animation:fadeIn .45s ease both}
.faq-top{border-top:1px solid rgba(21,22,23,.2)}

/* ---------- ticket (price) ---------- */
.ticket{background:var(--ink);color:var(--paper);display:flex;flex-direction:column}
.ticket-top{padding:44px 44px 36px}
.ticket-cut{position:relative;height:0;border-top:2px dashed rgba(244,242,236,.22);margin:0 28px}
.ticket-cut::before,.ticket-cut::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--paper)}
.ticket-cut::before{left:-44px}.ticket-cut::after{right:-44px}
.stone .ticket-cut::before,.stone .ticket-cut::after{background:var(--stone)}
.ticket-bot{padding:32px 44px 44px;display:flex;flex-direction:column;flex:1}
.price{margin:0;font-size:112px;line-height:.95;font-weight:800;font-stretch:118%;letter-spacing:-.045em;white-space:nowrap}

/* ---------- price table ---------- */
.ptable{width:100%;border-collapse:collapse}
.ptable th{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:0 0 16px;color:var(--muted-light);border-bottom:2px solid var(--ink)}
.ptable td{padding:26px 0;border-bottom:1px solid var(--line-light);font-size:21px;vertical-align:baseline}
.ptable td:last-child{text-align:right;font-weight:700;font-stretch:108%}
.ptable tr{transition:background .25s}
.ptable tbody tr:hover{background:var(--paper-2)}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label,.legend{font-size:15px;font-weight:600}
.field .opt{font-weight:400;color:var(--muted-light)}
.input{font:inherit;font-size:17px;color:var(--ink);background:var(--paper-2);border:1.5px solid rgba(21,22,23,.3);border-radius:0;min-height:56px;padding:14px 16px;width:100%;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:#6E6B64}
.input:hover{border-color:var(--ink)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--orange)}
textarea.input{min-height:160px;resize:vertical;line-height:1.55}
.field.err .input{border-color:#B3261E;border-width:2px;background:#FDF3F2}
.errmsg{display:flex;gap:8px;align-items:center;font-size:14.5px;font-weight:600;color:#9F1F18}
.errmsg::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#9F1F18;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;background:var(--paper-2);border:1.5px solid rgba(21,22,23,.2);cursor:pointer;font-size:15.5px;transition:border-color .2s,background .2s}
.choice:hover{border-color:var(--ink)}
.choice input{width:20px;height:20px;accent-color:var(--orange);margin:0;flex:none}
.choice.on{border-color:var(--ink);background:#FFF7EF}
.seg{display:inline-flex;border:1.5px solid var(--ink)}
.seg label{min-height:48px;padding:0 20px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:15px}
.seg label.on{background:var(--ink);color:var(--paper)}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.5}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--orange);flex:none}
.errbox{border-left:6px solid #9F1F18;background:#FDF3F2;color:var(--ink);padding:18px 22px}
.okbox{border-left:6px solid var(--orange);background:var(--ink);color:var(--paper);padding:28px}

/* ---------- final CTA ---------- */
.cta-row{display:flex;align-items:center;margin-left:calc(50% - 50vw)}
.cta-line{flex:1;height:8px;background:var(--orange);transform-origin:left}
.cta-stn{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);border:7px solid var(--orange);margin-right:20px;animation:pulse 2.4s ease-out infinite}

/* ---------- footer ---------- */
.ftr{background:var(--ink-2);color:var(--paper);overflow:hidden}
.ftr-h{margin:0 0 20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--orange)}
.fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.fl a,.ftr-bot a{text-decoration:none;color:#BEBCB6;transition:color .25s}
.fl a:hover,.ftr-bot a:hover{color:var(--paper)}
.wordmark{margin:0;font-size:7.4vw;line-height:.92;font-weight:800;font-stretch:125%;letter-spacing:-.05em;color:#1D1E20;white-space:nowrap}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:24px;padding-bottom:28px;font-size:13.5px;color:var(--muted-dark-2)}
.cookie{position:fixed;left:24px;bottom:24px;z-index:60;width:420px;max-width:calc(100vw - 32px);background:var(--paper);color:var(--ink);padding:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border-top:6px solid var(--orange);animation:fadeIn .7s ease 2.4s both}

/* ---------- legal ---------- */
.toc{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line-light)}
.toc a{display:flex;gap:14px;padding:12px 0;text-decoration:none;font-size:15px}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-mono);font-size:12px;padding-top:2px;color:var(--muted-light)}
.toc a:hover{color:var(--ink);text-decoration:underline}
.prose h2{margin:56px 0 0;font-size:30px;line-height:1.15;font-weight:700;font-stretch:108%}
.prose h2 span{font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--muted-light);margin-right:14px;vertical-align:middle}
.prose p{margin:16px 0 0;font-size:18px;line-height:1.7}
.draft{display:flex;gap:14px;align-items:flex-start;border:2px dashed var(--orange);background:#FFF7EF;color:var(--ink);padding:18px 22px;font-size:15.5px}
.ph{display:block;border:1.5px dashed rgba(21,22,23,.35);background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(21,22,23,.04) 10px 20px);color:var(--muted-light);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;padding:16px;display:flex;align-items:center;justify-content:center;text-align:center}
.dark .ph{border-color:rgba(244,242,236,.3);color:var(--muted-dark-2);background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(244,242,236,.04) 10px 20px)}

/* ---------- scroll-driven reveals (no-op where unsupported) ---------- */
@supports (animation-timeline: view()){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
@keyframes rv{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.bar,.cta-line{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st::after{transform-origin:left;animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
}
.st{position:relative;color:#8F8D87;text-decoration:none}
.st::after{content:"";position:absolute;left:-2px;right:-2px;top:55%;height:3px;background:var(--orange)}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- responsive ---------- */
.only-sm{display:none !important}
@media (max-width:1000px){
:root{--gutter:20px;--sec:80px}
.g,.g-7-5,.g-5-7,.g-6-6,.g-4-8,.g-8-4{grid-template-columns:minmax(0,1fr) !important;gap:40px}
.cols-2,.cols-3,.bento,.form,.choices{grid-template-columns:minmax(0,1fr) !important}
.bento>*{grid-column:auto !important;grid-row:auto !important}
.sticky{position:static}
.only-lg,.nav,.util{display:none !important}
.only-sm{display:flex !important}
.burger{display:flex}
.hdr-in{height:64px;gap:8px}
.hdr-in .logo img{height:28px !important}
.d-xl{font-size:46px}.d-l{font-size:44px}.h1{font-size:40px}.h2{font-size:34px}.h3{font-size:24px}.h4{font-size:20px}
.lead{font-size:17px}.body{font-size:16.5px}
.phero-in{padding-top:48px;padding-bottom:64px}
.row{grid-template-columns:minmax(0,1fr);padding:28px 0}
.row:hover{padding-left:0}
.ruler{display:none}
.prow{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0}
.track{height:10px}
.stn,.term{display:none}
.faq summary{font-size:18px;padding:20px 0}
.faq .ans{padding:0 0 22px;font-size:15.5px}
.price{font-size:72px}
.ticket-top{padding:28px 22px 24px}.ticket-bot{padding:22px 22px 24px}
.ticket-cut{margin:0 18px}.ticket-cut::before{left:-32px}.ticket-cut::after{right:-32px}
.ticket-cut::before,.ticket-cut::after{width:24px;height:24px;top:-13px}
.ptable td{font-size:17px;padding:18px 0}
.check li{font-size:16.5px;padding:16px 0}
.tile{padding:24px}
.ghost-num{font-size:130px;bottom:-30px}
.btn-row{flex-direction:column}
.btn-row .btn{width:100%;justify-content:space-between}
.btn-lg{min-height:64px;font-size:18px}
.cta-row{margin-left:-20px}
.cta-stn{margin-right:0}
.cookie{left:16px;right:16px;bottom:16px;width:auto}
.wordmark{font-size:15vw}
.mq li{font-size:15.5px;padding:0 22px}
.prose h2{font-size:24px}.prose p{font-size:16.5px}
/* inline 5–6 column station strips collapse to 2 columns */
.page [style*="repeat(6, minmax(0, 1fr))"]:not(.track):not(.weeks),.page [style*="repeat(5, minmax(0, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.page [style*="repeat(4, minmax(0, 1fr))"]{grid-template-columns:minmax(0,1fr) !important}
}
/* check list on dark tiles */
.tile-ink .check li{border-color:var(--line-dark)}
.tile-ink .check li::before{background-color:var(--orange);border-color:var(--orange)}