/* ============================================================
   THE CONNECTIONS PROJECT SF
   Four voices of correspondence:
     Sorts Mill Goudy : the printed letterhead (display)
     Alegreya         : the book hand (body)
     Courier Prime    : the typewriter & postal marks (ephemera)
     La Belle Aurore  : the pen (accents only)
   ============================================================ */

:root{
  --ink:#2b2622;
  --ink-soft:#5c544b;
  --ink-faint:#8a8178;
  --paper:#f6f0e6;
  --paper-2:#efe6d6;
  --paper-warm:#fbf7ef;
  --paper-sheet:#fdfaf4;
  --cream:#f6ece0;
  --red:#8c2f2a;
  --red-deep:#5e1d1a;
  --display:'Sorts Mill Goudy',Georgia,serif;
  --body:'Alegreya',Georgia,serif;
  --mono:'Courier Prime',ui-monospace,monospace;
  --pen:'La Belle Aurore',cursive;
  --ease:cubic-bezier(.2,.8,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#f6f0e6;}
::selection{background:#8c2f2a;color:#f6f0e6;}
img{max-width:100%;}
input::placeholder,textarea::placeholder{color:#b3a999;opacity:1;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px dashed var(--red);outline-offset:3px;}

.page{font-family:var(--body);color:var(--ink);background:var(--paper);position:relative;}
.grain{position:fixed;inset:0;z-index:2000;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}

.wrap{max-width:1140px;margin:0 auto;padding-left:48px;padding-right:48px;}
.hand{font-family:var(--pen);}
.tear{display:block;width:100%;height:30px;}

.airmail{height:8px;background:var(--red);}
.airmail--top{position:sticky;top:0;z-index:60;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:3100;background:var(--red);color:var(--cream);font-family:var(--mono);font-size:13px;padding:12px 18px;text-decoration:none;}
.skip-link:focus{left:12px;top:12px;}

/* ============ TYPE ============ */
h1{font-family:var(--display);font-weight:400;line-height:1.07;letter-spacing:-.01em;color:var(--ink);margin:0;}
h1 em{font-style:italic;color:var(--red);}
h2{font-family:var(--display);font-weight:400;line-height:1.1;color:var(--ink);margin:0;}
h2 em{font-style:italic;color:var(--red);}

/* ============ POSTAL COMPONENTS ============ */
.rstamp{display:inline-block;font-family:var(--mono);font-weight:700;font-size:15px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(140,47,42,.92);border:2px solid rgba(140,47,42,.65);border-radius:3px;padding:10px 15px 8px;}
.rstamp--mb{margin-bottom:26px;}

.btn-stamp{display:inline-block;position:relative;background:var(--red);color:var(--cream);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:17px 28px 15px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 var(--red-deep),0 12px 24px rgba(43,38,34,.16);transition:background .15s,transform .1s,box-shadow .1s;}
.btn-stamp::after{content:'';position:absolute;inset:4px;border:1.5px dashed rgba(246,236,224,.5);pointer-events:none;}
.btn-stamp:hover{background:#7a2622;}
.btn-stamp:active{transform:translateY(3px);box-shadow:0 0 0 var(--red-deep),0 4px 10px rgba(43,38,34,.2);}
.btn-stamp--sm{font-size:14px;padding:15px 24px 13px;box-shadow:0 2px 0 var(--red-deep),0 6px 14px rgba(43,38,34,.14);}

.link-post{font-family:var(--mono);font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1.5px dashed rgba(43,38,34,.55);padding-bottom:2px;}
.link-post:hover{color:var(--red);border-bottom-color:var(--red);}

/* ============ NAV / letterhead ============ */
.nav{position:sticky;top:8px;z-index:50;backdrop-filter:saturate(120%) blur(8px);background:rgba(246,240,230,.9);border-bottom:1px solid rgba(43,38,34,.12);}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:28px;}
.wordmark{text-decoration:none;color:var(--ink);flex:0 0 auto;}
.wordmark .wm{font-family:var(--display);font-size:26.5px;letter-spacing:-.01em;line-height:1;white-space:nowrap;}
.wordmark .wm em{font-style:italic;color:var(--red);}
.wordmark .wm .wmb{white-space:nowrap;}
.wordmark .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a.plain{font-family:var(--mono);font-size:15.5px;color:var(--ink-soft);text-decoration:none;border-bottom:1.5px dashed transparent;padding-bottom:2px;white-space:nowrap;}
.nav-links a.plain:hover{color:var(--red);border-bottom-color:rgba(140,47,42,.6);}

/* ============ THE ROUTE / STEPS (both pages) ============ */
.how-sub{font-size:18px;color:var(--ink-soft);line-height:1.6;margin:14px 0 0;}
.howwrap{position:relative;margin-top:50px;}
.route{position:absolute;left:26px;right:26px;top:26px;height:0;border-top:2.5px dotted rgba(43,38,34,.4);z-index:0;}
.steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
.stepnum{position:relative;z-index:1;width:52px;height:52px;border:1.5px solid var(--red);border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:23px;color:var(--red);background:var(--paper-warm);margin-bottom:16px;box-shadow:0 3px 10px rgba(43,38,34,.08);}
.step h3{font-family:var(--display);font-weight:400;font-size:25px;color:var(--ink);margin:0 0 8px;}
.step p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin:0;}

/* ============ THE FORM SHEET (both pages) ============ */
.promiselist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
.promiselist li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-soft);}
.promiselist li .env-glyph{color:var(--red);font-family:var(--display);flex:none;}

.sheet{position:relative;background:var(--paper-sheet);border:1px solid rgba(43,38,34,.13);box-shadow:0 20px 52px rgba(43,38,34,.13);}
.sheet-stripe{height:7px;background:repeating-linear-gradient(-45deg,#8c2f2a 0 12px,#fdfaf4 12px 24px);}
.sheet-in{padding:34px 40px 36px;}
.formhead{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);text-align:center;padding-bottom:11px;border-bottom:3px double rgba(43,38,34,.25);margin-bottom:34px;}

.stamprow{display:flex;gap:14px;margin-bottom:24px;}
.stampopt{--r:4.5px;flex:1;position:relative;background:var(--paper-warm);padding:10px;border:none;cursor:pointer;font-family:var(--mono);
  -webkit-mask:radial-gradient(var(--r),#0000 98%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)),linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
  mask:radial-gradient(var(--r),#0000 98%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)),linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
  transition:transform .15s;}
.stampopt:hover{transform:translateY(-3px) rotate(-.5deg);}
.stampopt .inner{border:1px solid rgba(43,38,34,.16);padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:background .18s,border-color .18s;}
.stampopt .inner svg{color:var(--red);transition:color .18s;}
.stampopt .inner .t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.35;color:var(--ink);text-align:center;transition:color .18s;}
.stampopt.sel .inner{background:var(--red);border-color:rgba(246,236,224,.35);}
.stampopt.sel .inner svg{color:var(--cream);}
.stampopt.sel .inner .t{color:var(--cream);}

.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:block;margin-bottom:21px;}
.field .lab{display:block;font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6259;margin-bottom:5px;}
.field .lab .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-faint);}
.field input,.field select,.field textarea{width:100%;font-family:var(--mono);font-size:17px;color:var(--ink);background:transparent;border:none;border-bottom:1.5px solid rgba(43,38,34,.32);border-radius:0;padding:7px 2px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red);box-shadow:0 1.5px 0 var(--red);}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1,1 L6,7 L11,1' fill='none' stroke='%238c2f2a' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer;}
.field textarea{line-height:30px;padding-top:2px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(43,38,34,.16) 29px 30px);background-attachment:local;resize:vertical;}
.field[data-invalid] input,.field[data-invalid] select{border-bottom-color:var(--red);}
.ferr{display:block;font-family:var(--mono);font-style:italic;font-size:12.5px;color:var(--red);margin-top:5px;}
.ferr[hidden]{display:none;}
.btn-submit{width:100%;margin-top:6px;}
.formfoot{font-size:13.5px;line-height:1.5;color:var(--ink-soft);text-align:center;margin:13px 0 0;}

/* ============ SUCCESS / the sealed envelope ============ */
.success{padding:46px 36px 44px;text-align:center;animation:envUp .5s ease-out both;}
@keyframes envUp{0%{transform:translateY(14px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.env{position:relative;width:256px;max-width:100%;aspect-ratio:8/5;margin:0 auto 27px;background:#f6efe1;border:1px solid rgba(43,38,34,.16);box-shadow:0 16px 34px rgba(43,38,34,.14);}
.env::before{content:'';position:absolute;left:0;right:0;top:0;height:62%;clip-path:polygon(0 0,50% 100%,100% 0);background:#efe5d0;filter:drop-shadow(0 1px 0 rgba(43,38,34,.18));}
.wax{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-8deg);width:46px;height:46px;border-radius:50%;background:var(--red);box-shadow:0 5px 13px rgba(43,38,34,.32);animation:sealIn .5s cubic-bezier(.34,1.56,.64,1) .3s both;}
@keyframes sealIn{0%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.7);opacity:0;}100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);opacity:1;}}
.success h3{font-family:var(--display);font-weight:400;font-size:26px;color:var(--ink);margin:0 0 10px;}
.success p{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:25em;margin:0 auto;}

/* ============ FOOTER : an envelope face ============ */
.footer{background:var(--ink);color:#e8ddcb;}
.footer-in{padding-top:62px;padding-bottom:30px;}
.footcols{display:grid;grid-template-columns:1.35fr 1fr 1.15fr;gap:56px;align-items:start;padding-bottom:44px;}
.fbrand .fname{font-family:var(--display);font-size:29px;line-height:1.1;color:var(--cream);margin-bottom:14px;}
.fbrand .ftag{font-family:var(--mono);font-size:14px;line-height:1.75;color:rgba(232,221,203,.66);max-width:22em;}
.fcolhead{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:rgba(232,221,203,.46);margin-bottom:18px;}
.fcollinks{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.fcollinks a{font-family:var(--mono);font-size:14.5px;color:#e8ddcb;text-decoration:none;border-bottom:1.5px dashed transparent;padding-bottom:2px;}
.fcollinks a:hover{border-bottom-color:rgba(232,221,203,.6);}
.fmail{display:inline-block;font-family:var(--mono);font-size:14.5px;color:#e8ddcb;text-decoration:none;border-bottom:1.5px dashed rgba(232,221,203,.5);padding-bottom:2px;margin-bottom:18px;}
/* long single-token addresses must not set the page's minimum width */
.fmail,.retaddr,.inq-mail a{overflow-wrap:anywhere;}
.fmail:hover{color:#fff;border-bottom-color:#fff;}
.retaddr{font-family:var(--mono);font-size:14px;line-height:1.75;color:rgba(232,221,203,.66);}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(232,221,203,.16);padding-top:20px;}
.copy{font-family:var(--mono);font-size:11.5px;color:rgba(232,221,203,.48);}

/* ============================================================
   HOME PAGE
   ============================================================ */
.t-home h1{font-size:58px;max-width:10.8em;}
.t-home h2{font-size:44px;}

.hero{scroll-margin-top:96px;}
.t-home .hero-in{padding-top:84px;padding-bottom:110px;display:grid;grid-template-columns:1.06fr .94fr;gap:70px;align-items:center;}
.hero-copy{font-size:19.5px;line-height:1.62;color:var(--ink-soft);max-width:30em;margin:30px 0 38px;}
.cta-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}

.cluster{position:relative;padding-top:34px;}
.mat{position:relative;background:#fff;padding:14px;border:1px solid rgba(43,38,34,.1);border-radius:2px;box-shadow:0 24px 52px rgba(43,38,34,.18);}
.mat img{display:block;width:100%;height:auto;border-radius:1px;}
.mat.heroMat{transform:rotate(-1.6deg);}
.mat.heroMat img{aspect-ratio:5/4;object-fit:cover;object-position:center 62%;}
.pcorner{position:absolute;width:32px;height:32px;background:var(--ink);opacity:.85;}
.pc-tl{top:-7px;left:-7px;clip-path:polygon(0 0,100% 0,0 100%);}
.pc-tr{top:-7px;right:-7px;clip-path:polygon(0 0,100% 0,100% 100%);}
.pc-bl{bottom:-7px;left:-7px;clip-path:polygon(0 0,0 100%,100% 100%);}
.pc-br{bottom:-7px;right:-7px;clip-path:polygon(100% 0,100% 100%,0 100%);}

.t-home .how{scroll-margin-top:96px;background:var(--paper-2);border-top:1px solid rgba(43,38,34,.08);}
.t-home .how-in{padding-top:76px;padding-bottom:82px;}
.t-home .how-sub{max-width:32em;}

.t-home .why{scroll-margin-top:96px;background:var(--red);color:var(--cream);}
.t-home .why-in{padding-top:70px;padding-bottom:72px;display:grid;grid-template-columns:1.3fr .95fr;gap:56px;align-items:start;}
.why-statement{font-family:var(--display);font-weight:400;font-size:39px;line-height:1.24;color:var(--cream);margin:0 0 20px;}
.why-statement em{font-style:italic;}
.statcol{border-left:1px solid rgba(246,236,224,.3);padding-left:42px;}
.envrow{display:flex;gap:12px;margin-bottom:14px;}
.statnum{font-family:var(--display);font-size:70px;line-height:1;color:var(--cream);margin-bottom:10px;}
.statcopy{font-size:16px;line-height:1.6;color:rgba(246,236,224,.85);margin:0 0 12px;}
.statsrc{font-family:var(--mono);font-size:11.5px;line-height:1.55;color:rgba(246,236,224,.55);margin:0 0 26px;}
.whyquote{font-family:var(--display);font-style:italic;font-size:21px;line-height:1.5;color:var(--cream);}

.about{scroll-margin-top:96px;}
.about-in{padding-top:78px;padding-bottom:96px;display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center;}
.about p{font-size:17.5px;line-height:1.68;color:var(--ink-soft);margin:0 0 15px;}
.sig{font-family:var(--pen);font-size:28px;color:var(--red);transform:rotate(-1.2deg);margin-top:22px;}
.aboutwrap{position:relative;}
.aboutMat{transform:rotate(1.4deg);}
.aboutMat img{aspect-ratio:4/3;object-fit:cover;}

.signup{scroll-margin-top:96px;background:var(--paper-2);border-top:1px solid rgba(43,38,34,.08);}
.signup-in{padding-top:100px;padding-bottom:120px;display:grid;grid-template-columns:.88fr 1.12fr;gap:72px;align-items:start;}
.signup-left{position:sticky;top:112px;}
.signup-left p{font-size:17.5px;line-height:1.65;color:var(--ink-soft);margin:18px 0 26px;max-width:25em;}

/* ============================================================
   PARTNER WITH US PAGE
   ============================================================ */
.t-partner h1{font-size:64px;max-width:15em;}
.t-partner h2{font-size:42px;max-width:15em;}
.t-partner .hero-in{padding-top:84px;padding-bottom:96px;}
.t-partner .hero-copy{font-size:20px;max-width:44em;}

.t-partner .why{scroll-margin-top:96px;background:var(--paper-2);border-top:1px solid rgba(43,38,34,.08);}
.t-partner .why-in{padding-top:76px;padding-bottom:82px;}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:54px;}
.reason h3{font-family:var(--display);font-weight:400;font-size:26px;color:var(--ink);margin:0 0 10px;}
.reason p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin:0;}

.t-partner .how{scroll-margin-top:96px;}
.t-partner .how-in{padding-top:78px;padding-bottom:84px;}
.t-partner .how-sub{max-width:34em;}

.inquire{scroll-margin-top:96px;background:var(--red);color:var(--cream);}
.inquire-in{padding-top:78px;padding-bottom:88px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;}
.inq-left{position:sticky;top:118px;}
.inq-left h2{color:var(--cream);}
.inq-left h2 em{color:#f0c9b8;}
.inq-left p{font-size:18px;line-height:1.65;color:rgba(246,236,224,.85);max-width:26em;margin:20px 0 26px;}
.inq-left .promiselist{margin:0 0 28px;}
.inq-left .promiselist li{font-size:16px;color:rgba(246,236,224,.88);}
.inq-left .promiselist li .env-glyph{color:#f0c9b8;}
.inq-mail{font-family:var(--mono);font-size:14.5px;line-height:1.9;color:rgba(246,236,224,.72);}
.inq-mail a{color:var(--cream);text-decoration:none;border-bottom:1.5px dashed rgba(246,236,224,.55);padding-bottom:2px;}
.inq-mail a:hover{border-bottom-color:#fff;color:#fff;}
.t-partner .sheet{box-shadow:0 24px 58px rgba(43,38,34,.28);}
.t-partner .sheet-stripe{background:repeating-linear-gradient(-45deg,#2b2622 0 12px,#fdfaf4 12px 24px);}
.t-partner .formhead{margin-bottom:30px;}

/* ============================================================
   PAGE LOADING & ENTRANCE ANIMATIONS
   Every rule that hides something is gated behind .js, which is
   set by an inline script in <head>. Without JS the page renders
   fully and the curtain never appears.
   ============================================================ */

/* ---- the delivery curtain ---- */
.loader{position:fixed;inset:0;z-index:3000;display:none;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);}
.js .loader{display:flex;}
.loader::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}
.loader-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 28px;}

.loader-env{position:relative;width:232px;aspect-ratio:8/5;margin-bottom:34px;}
.loader-env-back{position:absolute;inset:0;z-index:1;background:#f6efe1;border:1px solid rgba(43,38,34,.16);box-shadow:0 18px 38px rgba(43,38,34,.16);animation:envDrop .5s var(--ease) both;}
.loader-letter{position:absolute;left:9%;width:82%;height:88%;bottom:9%;z-index:2;background:#fffdf8;border:1px solid rgba(43,38,34,.13);box-shadow:0 6px 14px rgba(43,38,34,.12);padding:16px 15px;display:flex;flex-direction:column;gap:9px;animation:letterIn .75s var(--ease) .3s both;}
.ll-line{display:block;height:5px;border-radius:2px;background:rgba(43,38,34,.16);}
.ll-line:nth-child(1){width:52%;background:rgba(140,47,42,.32);}
.ll-line:nth-child(2){width:100%;}
.ll-line:nth-child(3){width:92%;}
.ll-line:nth-child(4){width:74%;}
.loader-env-flap{position:absolute;left:0;right:0;top:0;height:62%;z-index:3;clip-path:polygon(0 0,50% 100%,100% 0);background:#efe5d0;filter:drop-shadow(0 1px 0 rgba(43,38,34,.18));transform-origin:50% 0;animation:flapShut .45s var(--ease) .85s both;}
.loader-wax{position:absolute;left:50%;top:62%;z-index:4;width:43px;height:43px;border-radius:50%;background:var(--red);box-shadow:0 5px 13px rgba(43,38,34,.32);transform:translate(-50%,-50%) rotate(-8deg);animation:sealStamp .45s cubic-bezier(.34,1.56,.64,1) 1.15s both;}

@keyframes envDrop{0%{opacity:0;transform:translateY(16px) scale(.97);}100%{opacity:1;transform:none;}}
@keyframes letterIn{0%{opacity:0;transform:translateY(-78%) rotate(-2.5deg);}55%{opacity:1;}100%{opacity:1;transform:translateY(0) rotate(0);}}
@keyframes flapShut{0%{transform:rotateX(122deg);}100%{transform:rotateX(0);}}
@keyframes sealStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.9);}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);}}

.loader-word{font-family:var(--display);font-size:27px;line-height:1.15;color:var(--ink);animation:fadeUp .6s var(--ease) .45s both;}
.loader-word em{font-style:italic;color:var(--red);}
.loader-sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:9px;animation:fadeUp .6s var(--ease) .6s both;}
.loader-bar{width:186px;height:5px;margin-top:26px;background:rgba(43,38,34,.12);overflow:hidden;animation:fadeUp .6s var(--ease) .6s both;}
.loader-bar span{display:block;width:100%;height:100%;background:var(--red);transform-origin:0 50%;animation:barFill 1.5s var(--ease) .15s both;}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
@keyframes barFill{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}

/* dismissal — the curtain lifts like a letter drawn out of its envelope */
.loader--out{animation:curtainUp .6s cubic-bezier(.6,0,.35,1) both;pointer-events:none;}
@keyframes curtainUp{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-3%);}}
.loader--gone{display:none !important;}

/* quick mode — repeat navigations inside the same session */
.quick .loader-env,.quick .loader-bar{display:none;}
.quick .loader-word,.quick .loader-sub{animation-delay:0s;animation-duration:.3s;}

/* leaving for another page — the curtain drops back down */
.loader--in{display:flex !important;animation:curtainDown .34s var(--ease) both;}
@keyframes curtainDown{0%{opacity:0;transform:translateY(-3%);}100%{opacity:1;transform:none;}}

/* ---- entrance + scroll reveal ---- */
.js .reveal{opacity:0;transform:translateY(22px);}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--rd,0ms);}
.js .reveal--soft{transform:translateY(12px);}
.js .route{transform:scaleX(0);transform-origin:0 50%;}
.js .route.is-in{transform:scaleX(1);transition:transform 1.05s var(--ease) .15s;}
.js .airmail--top{transform:scaleX(0);transform-origin:0 50%;}
.is-ready .airmail--top{transform:scaleX(1);transition:transform .7s var(--ease);}
.js .nav{opacity:0;transform:translateY(-12px);}
.is-ready .nav{opacity:1;transform:none;transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .loader{display:none;}
  .js .reveal,.js .route,.js .airmail--top,.js .nav{opacity:1;transform:none;}
  .success,.wax,.loader-env-back,.loader-letter,.loader-env-flap,.loader-wax,.loader-word,.loader-sub,.loader-bar,.loader-bar span{animation:none !important;}
  .stampopt:hover{transform:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .wrap{padding-left:28px;padding-right:28px;}
  .t-home .hero-in,.t-home .why-in,.about-in,.signup-in,.t-partner .hero-in,.inquire-in{grid-template-columns:1fr;gap:56px;}
  .steps,.reasons{grid-template-columns:1fr;gap:44px;}
  .route{display:none;}
  .t-home h1{font-size:44px;}
  .t-partner h1{font-size:42px;}
  .t-partner h2{font-size:34px;}
  .why-statement{font-size:30px;}
  .signup-left,.inq-left{position:static;}
  .statcol{border-left:none;padding-left:0;}
  .fieldrow{grid-template-columns:1fr;gap:0;}
  .nav-links a.plain{display:none;}
  .nav-in{gap:14px;}
  /* let the wordmark wrap rather than shoulder the CTA off the screen */
  .wordmark{flex:0 1 auto;min-width:0;}
  .wordmark .wm{font-size:22px;line-height:1.12;white-space:normal;}
  .wordmark .sub{font-size:10.5px;letter-spacing:.14em;white-space:normal;}
  .btn-stamp--sm{white-space:nowrap;letter-spacing:.07em;padding:12px 15px 10px;}
  .footcols{grid-template-columns:1fr;gap:38px;padding-bottom:34px;}
  .inquire-in{gap:48px;}
}
@media (max-width:640px){
  .sheet-in{padding:28px 24px 30px;}
  /* stacked on a phone: the statement reads as a centred pull-quote and the
     statistics step down so they sit under it rather than shout over it */
  .why-statement{font-size:26px;text-align:center;}
  .envrow{gap:9px;margin-bottom:12px;}
  .envrow svg{width:34px;height:24px;}
  .statnum{font-size:46px;margin-bottom:8px;}
  .statcopy{font-size:15px;}
  .statsrc{font-size:11px;margin-bottom:22px;}
  .whyquote{font-size:18px;}
  .loader-env{width:190px;}
  .loader-word{font-size:23px;}
}
@media (max-width:420px){
  .wordmark .wm{font-size:19.5px;}
  .wordmark .sub{display:none;}
  .btn-stamp--sm{font-size:11.5px;letter-spacing:.04em;padding:10px 13px 8px;}
  .btn-stamp--sm::after{inset:3px;}
  .stamprow{flex-direction:column;}
}