@font-face{font-family:Bitter;src:url('assets/bitter-variable-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:Bevan;src:url('assets/bevan-400-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Yellowtail;src:url('assets/yellowtail-400-latin.woff2') format('woff2');font-display:swap}
:root{--green:#073022;--dark:#03241a;--cream:#f4ebe3;--paper:#f5f1ed;--red:#be2935;--ink:#141a16;--bar:69px}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:calc(var(--bar) + 24px)}body{margin:0;background:var(--green);color:var(--cream);font:16px/1.5 Bitter,Georgia,serif}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #dcaf59;outline-offset:5px}p,h1,h2,figure{margin:0}.skip{position:fixed;top:-100px;left:15px;background:#fff;color:#000;z-index:100;padding:12px}.skip:focus{top:80px}
.shopping-bar{position:fixed;inset:0 0 auto;z-index:20;min-height:var(--bar);display:flex;align-items:center;justify-content:center;background:#f2e5d7;color:var(--ink);box-shadow:0 4px 12px #0002;padding:12px 25px}.shopping-bar p{letter-spacing:.3px;font-size:16px;text-align:center}.small-logo{position:absolute;left:26px;top:13px;width:48px;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}.scrolled .small-logo{opacity:1;transform:none}.buy{position:absolute;right:26px;top:12px;display:flex;align-items:center;gap:9px;border-radius:28px;background:var(--red);padding:8px 12px;color:var(--cream);font-size:15px;font-weight:600;box-shadow:0 3px 0 #92202b66,0 5px 15px #a8262c44;transform-origin:50% 120%;animation:cta-wobble 3.4s ease-in-out infinite;transition:box-shadow .2s ease,filter .2s ease}.buy:hover{filter:brightness(1.07);box-shadow:0 3px 0 rgba(0,0,0,.22),0 9px 24px rgba(189,46,53,.5)}.buy:active{animation:none;transform:translateY(2px)}.buy img{width:43px;height:23px;object-fit:contain}
@keyframes cta-wobble{
  0%,100%{transform:rotate(-1.7deg) translateY(0)}
  25%    {transform:rotate(1.5deg)  translateY(-1.5px)}
  50%    {transform:rotate(-1.1deg) translateY(.5px)}
  75%    {transform:rotate(1.9deg)  translateY(-1px)}
}
.hero{height:892px;min-height:780px;padding:248px 24px 0;text-align:center;position:relative}.eyebrow{font:700 13px/1.4 Bitter,Georgia,serif;letter-spacing:4px}.hero-mark{width:220px;margin:89px auto 79px;transform-origin:50% 85%;animation:welcome 1.2s cubic-bezier(.2,.7,.2,1) both}.hero-mark img{width:100%;height:194px;object-fit:contain}.hero h1{font:500 clamp(30px,3.9vw,52px)/1.2 Bitter,Georgia,serif;letter-spacing:-.025em}.unwrap{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:36px;padding:9px 15px 10px;border:1px solid #f4ebe32e;border-radius:999px;background:#f4ebe305;color:#f4ebe3cc;font:700 11px/1.2 Bitter,Georgia,serif;letter-spacing:2.4px;transition:color .2s,border-color .2s,background .2s}.unwrap:hover,.unwrap:focus-visible{color:var(--cream);border-color:#f4ebe36b;background:#f4ebe30b}.unwrap-label{white-space:nowrap}.unwrap-arrow{display:block;width:20px;height:20px;flex:none;animation:unwrap-drift 2.8s ease-in-out infinite}@keyframes unwrap-drift{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
.film{height:1780px;position:relative;margin-top:-60px;padding-top:0;padding-bottom:170px}.postcard-wrap{position:sticky;top:100px;width:min(408px,calc(100% - 36px));margin:auto;filter:drop-shadow(0 12px 14px #0006);transform-origin:center top;will-change:transform}.postcard{background:var(--paper);padding:18px;position:relative;color:var(--ink);mask:linear-gradient(#000 0 0) center/calc(100% - 16px) calc(100% - 16px) no-repeat,radial-gradient(circle at 8px 8px,transparent 6px,#000 6.5px) -8px -8px/24px 24px}.postcard-heading{display:flex;align-items:center;gap:12px;min-height:94px;padding:4px 8px 14px}.postcard-heading p{font-size:16px;line-height:1.5}.postcard-heading b{font-weight:600}.stamp{width:77px;height:77px;flex-shrink:0;border:2px solid var(--red);border-radius:50%;color:var(--red);display:grid;place-items:center;transform:rotate(-17deg);position:relative}.stamp:before{content:'';position:absolute;inset:4px;border:2px dotted #be293599;border-radius:50%}.stamp span{font:700 12px Bitter,Georgia,serif;border-top:1px solid #be293555;border-bottom:1px solid #be293555;padding:7px 0}.product-video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#000}
.paper{background-color:var(--cream);background-image:radial-gradient(#141a1621 1.7px,transparent 1.8px);background-size:30px 30px;color:var(--ink)}h2{font-family:Bevan,Georgia,serif;font-weight:400;line-height:1.04;text-align:center}h2 em{font-style:normal;color:var(--red)}.patents{padding:50px 48px 80px}.patents h2{max-width:1150px;margin:0 auto;font-size:clamp(38px,5.55vw,74px)}.patent-origin{text-align:center;font-size:19px;letter-spacing:3px;margin-top:20px}.patent-number{text-align:center;font:700 14px/1.5 Bitter,Georgia,serif;letter-spacing:2px;color:var(--red);margin-top:3px}.drawing-board{position:relative;max-width:1240px;height:500px;margin:45px auto 0}.fig{position:absolute;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.fig img{mix-blend-mode:multiply;display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center bottom}.fig figcaption{position:static;margin:0;text-align:center;color:var(--red);font:700 11px/1.4 Bitter,Georgia,serif;letter-spacing:3px}.f1{left:1%;top:2%;width:34%;height:28%}.f2{right:1%;top:5%;width:36%;height:19%}.f4{left:28%;top:24%;width:43%;height:61%}.f3{left:5%;bottom:3%;width:15%;height:55%}.f5{right:1%;bottom:5%;width:36%;height:21%}.cross{position:absolute;width:18px;height:18px;border:1px solid #be293588;border-radius:50%;z-index:2}.cross:before,.cross:after{content:'';position:absolute;background:#be293588}.cross:before{height:1px;width:34px;top:8px;left:-9px}.cross:after{height:34px;width:1px;top:-9px;left:8px}.tl{top:0;left:0}.tr{top:0;right:0}.bl{bottom:0;left:0}.br{bottom:0;right:0}
.cards{padding:30px 4% 80px}.cards h2{font-size:clamp(36px,5.25vw,70px);color:var(--green);max-width:1200px;margin:auto}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;max-width:1240px;margin:70px auto 56px}.quote-card{position:relative;background:var(--paper);padding:30px 22px 20px;display:flex;flex-direction:column;justify-content:space-between;min-height:260px;filter:drop-shadow(0 8px 0 #141a1622);transform:rotate(-1.5deg);border-radius:2px 9px 3px 7px}.quote-card:nth-child(2){transform:rotate(.9deg)}.quote-card:nth-child(3){transform:rotate(-.8deg)}.quote-card:after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:9px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 50%,92% 80%,83% 45%,74% 95%,66% 50%,57% 100%,49% 55%,39% 100%,31% 50%,22% 92%,13% 50%,5% 100%,0 70%)}.tape{position:absolute;width:105px;height:32px;top:-15px;left:calc(50% - 52px);background:linear-gradient(105deg,#c4a87cb8,#d6be9899 45%,#b89b70b3);transform:rotate(-5deg);clip-path:polygon(0 2%,97% 0,100% 91%,2% 100%)}.quote-card:nth-child(2) .tape{transform:rotate(5deg)}.quote{font-size:16px;line-height:1.65}.signed{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:24px}.signature{font:400 30px/1.2 Yellowtail,cursive;color:var(--red)}.role{font:700 10.6px/1.4 Bitter,Georgia,serif;letter-spacing:1.3px;margin-top:5px}.emoji{font:63px/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;flex:none}.founder-note{position:relative;max-width:985px;margin:auto;min-height:205px;display:flex;align-items:center;gap:28px;padding:12px 40px;color:var(--cream);background:var(--dark);filter:drop-shadow(0 9px 0 #141a1622);clip-path:polygon(0 2%,7% 3%,13% 1%,22% 2%,31% 0,42% 2%,53% 0,63% 1%,74% 0,83% 1%,91% 0,99% 0,100% 4%,99% 9%,100% 13%,99% 18%,100% 24%,99% 30%,100% 34%,99% 40%,100% 46%,99% 52%,100% 57%,99% 63%,100% 69%,99% 76%,100% 82%,99% 88%,100% 94%,99% 98%,90% 100%,80% 98%,72% 100%,61% 98%,50% 100%,40% 99%,29% 100%,18% 99%,7% 100%,0 98%,1% 90%,0 85%,1% 80%,0 73%,1% 67%,0 60%,1% 54%,0 48%,1% 42%,0 35%,1% 28%,0 22%,1% 17%,0 10%,1% 6%)}.founder-note>img{width:145px;height:180px;object-fit:contain;flex:none;transform:rotate(-7deg)}.founder-note>div{min-width:0}.note-eyebrow{color:var(--red);font:700 13px/1.5 Bitter,Georgia,serif;letter-spacing:2.5px}.founder-quote{font-size:19px;margin:10px 0}.founder-note .signature{font-size:33px}.founder-note .role{font-size:10.6px}
footer{background:var(--dark);padding:58px 24px 50px;font-family:Bitter,Georgia,serif;font-size:14px;color:#e4ded7}.footer-details{display:grid;grid-template-columns:1fr 1fr;max-width:670px;margin:auto;line-height:1.85}.footer-details address{font-style:normal;text-align:right;padding-right:26px}.footer-details nav{display:flex;flex-direction:column;justify-content:center;padding-left:26px;border-left:2px dotted var(--red)}footer a:hover{color:#fff;text-decoration:underline}.social{display:flex;gap:22px;align-items:center;justify-content:center;margin:42px 0 30px}.social img{width:23px;height:23px;object-fit:contain}.footer-line{text-align:center;opacity:.7}
@keyframes welcome{from{opacity:0;transform:translateY(18px) rotate(-7deg) scale(.95)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero{height:100vh;padding-top:27vh}.hero-mark{margin-top:10vh;margin-bottom:9vh}.film{height:1950px}}
@media(max-width:1000px){.shopping-bar{justify-content:flex-start;padding-left:85px}.shopping-bar p{font-size:13px;max-width:46%;text-align:center}.buy{right:18px}.hero{padding-top:220px}.eyebrow{letter-spacing:2.5px}.hero-mark{margin-top:85px;margin-bottom:75px}.drawing-board{height:420px}.card-grid{gap:20px}.quote-card{padding:25px 17px 18px}.quote{font-size:14px}.emoji{font-size:47px}.role{font-size:9px;letter-spacing:.8px}.founder-note{max-width:850px}.note-eyebrow{font-size:11px;letter-spacing:1.5px}.patent-origin{font-size:16px;letter-spacing:2px}.patent-number{font-size:12px}}
@media(max-width:650px){:root{--bar:88px}.shopping-bar{padding:9px 14px 11px;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:7px}.shopping-bar p{grid-column:1;grid-row:1;max-width:none;font-size:11px;letter-spacing:.35px}.buy{position:static;grid-column:1;grid-row:2;justify-self:center;white-space:nowrap;padding:7px 12px;font-size:clamp(12px,3.2vw,13px)}.buy img{width:39px;flex:none}.small-logo{position:relative;grid-column:1;grid-row:2;justify-self:start;align-self:center;top:auto;left:auto;width:32px;opacity:1;transform:none}.hero{padding:190px 18px 0;height:750px;min-height:0}.eyebrow{font-size:10px;letter-spacing:1.8px;max-width:320px;margin:auto}.hero-mark{width:175px;margin:67px auto 65px}.hero-mark img{height:154px}.hero h1{font-size:34px;line-height:1.35;letter-spacing:-.6px;max-width:380px;margin:auto}.unwrap{font-size:10px;letter-spacing:2.3px;margin-top:28px}.film{height:1280px;margin-top:-25px;padding-bottom:120px}.postcard-wrap{top:115px;width:min(350px,calc(100% - 32px))}.postcard{padding:15px}.postcard-heading{padding:0 5px 12px;min-height:84px;gap:9px}.postcard-heading p{font-size:13px}.stamp{width:62px;height:62px}.stamp span{font-size:10px}.patents{padding:55px 23px 60px}.patents h2{font-size:37px;line-height:1.12}.patent-origin{font-size:12px;letter-spacing:1.4px;margin-top:22px}.patent-number{font-size:10px;letter-spacing:1.2px;margin-top:8px}.drawing-board{height:635px;margin-top:35px}.f1{left:4%;top:3%;width:90%;height:18%}.f2{right:4%;top:26%;width:90%;height:13%}.f4{left:13%;top:39%;width:81%;height:31%}.f3{left:6%;bottom:4%;width:27%;height:24%}.f5{right:3%;bottom:4%;width:57%;height:15%}.fig figcaption{font-size:10px;letter-spacing:1.5px}.cards{padding:30px 25px 58px}.cards h2{font-size:36px;line-height:1.15;max-width:360px}.card-grid{grid-template-columns:1fr;gap:40px;margin:52px auto 48px;max-width:400px}.quote-card{padding:28px 24px 23px;min-height:250px}.quote{font-size:16px}.emoji{font-size:58px}.role{font-size:9.5px;letter-spacing:1px}.founder-note{display:grid;grid-template-columns:clamp(76px,24vw,124px) minmax(0,1fr);align-items:center;gap:clamp(10px,3vw,16px);text-align:left;min-height:0;padding:24px 18px 28px}.founder-note>img{width:100%;height:auto;max-height:170px;align-self:center}.note-eyebrow{font-size:clamp(8px,2.1vw,10px);line-height:1.55;letter-spacing:.9px}.founder-quote{font-size:clamp(14px,3.8vw,18px);line-height:1.45;margin:10px 0}.founder-note .signature{font-size:clamp(27px,7.5vw,33px)}.founder-note .role{font-size:clamp(8px,2.1vw,9.5px);line-height:1.5;letter-spacing:.65px}.footer-details{grid-template-columns:1fr;gap:19px;text-align:center}.footer-details address{padding:0;text-align:center}.footer-details nav{padding:18px 0 0;border-left:0;border-top:2px dotted #be293588;max-width:260px;width:100%;margin:auto}footer{font-size:13px;padding-top:40px}.social{margin:30px 0 22px}}
@media(max-width:350px){.hero h1{font-size:30px}.postcard-heading p{font-size:11.5px}.stamp{width:55px;height:55px}.patents h2{font-size:31px}.cards h2{font-size:31px}.quote-card{padding-left:18px;padding-right:18px}.quote{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.postcard-wrap{transform:none!important}}

/* Motion additions: independent recreation of the three observed interactions. */
.hero-logo{display:block;width:100%;height:194px;overflow:visible}
.ornament-swing{will-change:transform}
.stamp{border:0;display:block}
.stamp:before{display:none}
.stamp .stamp-ink{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:2px solid var(--red);border-radius:50%;font:700 12px Bitter,Georgia,serif}
.stamp-ink:before{content:'';position:absolute;inset:4px;border:2px dotted #be293599;border-radius:50%}
.stamp .stamp-ink>span{border:0;padding:0;font:inherit}
.stamp .stamp-press{position:absolute;inset:-10px;border:3px solid var(--red);padding:0;border-radius:50%;opacity:0;pointer-events:none;z-index:2}
.stamp.is-stamped .stamp-press{animation:stamp-press .68s cubic-bezier(.3,.85,.3,1) both}
.stamp.is-stamped .stamp-ink{animation:stamp-imprint .68s cubic-bezier(.3,1.3,.5,1) both}
.quote-card{--rest-angle:-.7deg;transform:rotate(var(--rest-angle));transition:none}
.quote-card:nth-child(2){--rest-angle:.45deg;transform:rotate(var(--rest-angle))}
.quote-card:nth-child(3){--rest-angle:-.35deg;transform:rotate(var(--rest-angle))}
@keyframes stamp-press{0%{opacity:0;transform:translateY(-35px) scale(1.65) rotate(-9deg)}25%{opacity:.5}48%{opacity:.85;transform:translateY(0) scale(.88) rotate(1deg)}65%{opacity:.25;transform:translateY(-3px) scale(1.02) rotate(-2deg)}100%{opacity:0;transform:translateY(-12px) scale(1.5) rotate(-4deg)}}
@keyframes stamp-imprint{0%,28%{transform:scale(1);opacity:.8}48%{transform:scale(.88,.81);opacity:1}70%{transform:scale(1.05,1.035)}100%{transform:scale(1);opacity:1}}
@media(max-width:650px){.hero-logo{height:154px}.stamp .stamp-ink{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ornament-swing{transform:none!important}.stamp-press{display:none}}

 .shopping-bar{min-height:69px}
@media(max-width:650px){.shopping-bar{min-height:88px}}
/* The product postcard previews at the fold and pauses on a sticky stage. */
.hero{height:calc(100svh - 44px);min-height:540px;padding:calc(var(--bar) + 24px) 20px 64px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-mark{width:min(260px,58vw);margin:clamp(20px,4svh,42px) auto}
.hero-logo{width:100%;height:auto;aspect-ratio:706/618}
.hero h1{flex-shrink:0}
.eyebrow{flex-shrink:0}
.unwrap{margin-top:clamp(18px,3.6svh,38px);flex-shrink:0}
.film{height:250svh;margin-top:-35svh;padding:0;position:relative;pointer-events:none}
.film-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:var(--bar) 12px 0;overflow:hidden;pointer-events:none}
.postcard-wrap{position:relative;top:auto;width:min(44svh,88vw);margin:0;filter:drop-shadow(0 18px 28px #0006);transform:none;will-change:auto}
.postcard{transform:translateY(2svh) rotate(-3.1deg) scale(.74);transform-origin:center;will-change:transform;pointer-events:auto}
.patents{padding-top:80px}
.small-logo{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0) rotate(0deg) scale(1);transform-origin:50% -30%;transition:opacity .2s ease,visibility 0s linear .2s}
.scrolled .small-logo{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) rotate(0deg) scale(1);transition:opacity 0s,visibility 0s}
.scrolled.logo-enter .small-logo{animation:logo-drop .66s cubic-bezier(.26,1.38,.4,1) both}
@keyframes logo-drop{from{transform:translate3d(0,-145%,0) rotate(-14deg) scale(.88)}to{transform:translate3d(0,0,0) rotate(0deg) scale(1)}}
/* Filter only a separate shadow, never the moving card and its text. */
.quote-card{background:transparent;border-radius:0;filter:none;isolation:isolate;transition:none;backface-visibility:hidden;transform:translate3d(0,0,0) rotate(var(--rest-angle))}
.quote-card:nth-child(2),.quote-card:nth-child(3){transform:translate3d(0,0,0) rotate(var(--rest-angle))}
.quote-card:before,.quote-card:after{content:'';position:absolute;inset:0;height:auto;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 98%,92% 99.5%,83% 98%,74% 100%,66% 98.5%,57% 100%,49% 98.5%,39% 100%,31% 98.5%,22% 99.5%,13% 98%,5% 100%,0 99%)}
.quote-card:before{background:var(--paper);z-index:-1}
.quote-card:after{background:#141a162b;transform:translateY(9px);filter:blur(7px);z-index:-2}
.company-name{display:block}.company-form{white-space:nowrap}
.document-page .shopping-bar .small-logo{opacity:1;visibility:visible;pointer-events:auto;transform:none;animation:none}
.document-heading{padding:calc(var(--bar) + 65px) 24px 65px;text-align:center}
.document-heading h1{font:400 clamp(38px,6vw,68px)/1.15 Bevan,Georgia,serif}
.document-heading em{font-style:normal;color:#edc8b7}
.document-area{padding:60px 24px 85px}
.document-sheet{max-width:900px;margin:auto;background:var(--paper);padding:clamp(24px,5vw,60px);box-shadow:0 8px 0 #141a1615;font:18px/1.65 Bitter,Georgia,serif;overflow-wrap:anywhere}
.document-sheet h2{text-align:left;font:700 24px/1.3 Bitter,Georgia,serif;margin:34px 0 12px;color:var(--green)}
.document-sheet h3{font:700 19px/1.4 Bitter,Georgia,serif;margin:28px 0 10px;color:var(--green)}
.document-sheet h2:first-child{margin-top:0}
.document-sheet p{margin:0 0 20px}
.document-sheet a{text-decoration:underline;text-underline-offset:3px}
.document-sheet .document-date{font-size:14px;color:#586057}
.document-sheet .back-home{display:inline-block;margin-top:22px;color:var(--red);font-weight:700}
@media(max-width:650px){.hero .eyebrow,.hero h1{margin:0}.hero{min-height:520px;padding:calc(var(--bar) + 22px) 18px 62px}.hero-mark{width:min(210px,53vw);margin:clamp(20px,4svh,36px) auto}.hero-logo{height:auto}.hero h1{font-size:clamp(27px,7.8vw,34px)}.film{padding:0;height:210svh}.postcard-heading{min-height:72px}.stamp{width:55px;height:55px}.postcard-heading p{font-size:clamp(10px,3vw,13px)}.patents{padding-top:65px}.document-heading{padding-top:calc(var(--bar) + 65px)}.document-area{padding:35px 18px 60px}.document-sheet{font-size:16px}.document-sheet h2{font-size:22px}footer{padding-left:12px;padding-right:12px;font-size:14px}.footer-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;font-size:11.5px}.footer-details address{text-align:right;padding-right:10px}.footer-details nav{text-align:left;margin:0;max-width:none;width:auto;border-top:0;border-left:2px dotted var(--red);padding:0 0 0 10px}.company-name{display:block}.company-form{display:block}}
@media(max-width:374px){.footer-details{grid-template-columns:1fr;font-size:11.5px;gap:22px}.footer-details address{text-align:center;padding:0}.footer-details nav{text-align:center;padding:0;border:0}.company-form{display:inline}}
@media(prefers-reduced-motion:reduce){.film{height:auto;margin-top:0}.film-stage{position:relative;height:auto;padding:24px 16px 100px}.postcard{transform:none!important;will-change:auto}.small-logo,.scrolled .small-logo{animation:none}.quote-card,.quote-card:nth-child(2),.quote-card:nth-child(3){transition:none;transform:none!important}}

/* Original postage edge, including Safari mask compositing. */
.postcard{--notch:7px;--gap:22px;
  -webkit-mask:
    radial-gradient(var(--notch) at 50% 0,#0000 97%,#000) 50% 0/var(--gap) 100%,
    radial-gradient(var(--notch) at 50% 100%,#0000 97%,#000) 50% 0/var(--gap) 100%,
    radial-gradient(var(--notch) at 0 50%,#0000 97%,#000) 0 50%/100% var(--gap),
    radial-gradient(var(--notch) at 100% 50%,#0000 97%,#000) 0 50%/100% var(--gap);
  mask:
    radial-gradient(var(--notch) at 50% 0,#0000 97%,#000) 50% 0/var(--gap) 100%,
    radial-gradient(var(--notch) at 50% 100%,#0000 97%,#000) 50% 0/var(--gap) 100%,
    radial-gradient(var(--notch) at 0 50%,#0000 97%,#000) 0 50%/100% var(--gap),
    radial-gradient(var(--notch) at 100% 50%,#0000 97%,#000) 0 50%/100% var(--gap);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Keep each phrase intact and place the snowflakes beside the complete heading. */
.hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:.9em;max-width:100%}
.eyebrow-copy{display:flex;align-items:center;justify-content:center;gap:.8em}
.eyebrow-copy>span{white-space:nowrap}
.eyebrow-snow{flex:none;letter-spacing:0;line-height:1}
@media(max-width:650px){.eyebrow-copy{flex-direction:column;gap:3px}.eyebrow-copy .eyebrow-divider{display:none}}

/* A looping product demonstration: playback UI appears only if a start gesture is needed. */
.product-film{position:relative}
.product-video{pointer-events:none}
.video-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:var(--green);pointer-events:none;opacity:1}
.product-film.has-video-frame .video-poster{opacity:0;transition:opacity .12s linear}
.product-film .video-start{z-index:2}
.video-start{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;border:0;padding:0;background:#0002;color:var(--cream);cursor:pointer}
.video-start[hidden]{display:none}
.video-start>span{display:grid;place-items:center;width:56px;height:56px;border:1px solid #f4ebe3cc;border-radius:50%;background:#073022c9}
.video-start svg{width:23px;height:23px;fill:currentColor}

/* Enlarge the SVG's actual viewport, keeping the artwork and layout unchanged.
   Padding in SVG units protects Safari's compositing surface during the swing. */
.hero-mark{position:relative;aspect-ratio:706/618;flex-shrink:0;overflow:visible}
.hero-mark .hero-logo{position:absolute;left:-19.830028%;top:-22.653722%;width:139.660057%;max-width:none;height:auto;aspect-ratio:986/898;overflow:visible}
.ornament-swing{will-change:auto}

/* Let the writing determine the postcard height, with a consistent small gap. */
.quote-card{min-height:0;justify-content:flex-start}
.quote-card .signed{margin-top:12px}
/* A quiet return link, consistently placed on both information pages. */
.document-return{margin-top:30px;padding-top:20px;border-top:1px solid #07302226}
.document-sheet .back-home{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 0;color:var(--green);font-size:14px;font-weight:400;text-decoration:none}
.back-home svg{width:17px;height:17px;flex:none}
.back-home:hover span,.back-home:focus-visible span{text-decoration:underline;text-underline-offset:4px}

/* Keep the two hero phrases intact with the new proportional serif. */
.hero h1>span{display:inline-block}
@media(max-width:650px){.hero h1>span{display:block}}

/* Align caption ink about 12px below the visible drawing, not transparent pixels.
   Container units follow the actual object-fit size without script or fixed breakpoints.
   FIG. 4 uses its measured lower-edge slope, including the caption's left edge. */
.fig{container-type:size;--caption-x:0px;--caption-tracking:3px;--bottom-space:0}
.fig figcaption{--drawing-height:min(calc(100cqw / var(--drawing-aspect)),calc(100cqh - 1.4em - 10px));--caption-half-width:calc(1.321em + 3 * var(--caption-tracking));--caption-y:calc(2px - .3em - var(--bottom-space) * var(--drawing-height));letter-spacing:var(--caption-tracking);transform:translate(var(--caption-x),var(--caption-y))}
.f1{--drawing-aspect:3.372093;--bottom-space:.09593}
.f2{--drawing-aspect:7.770701;--bottom-space:.012739}
.f3{--drawing-aspect:.651982;--bottom-space:.004405;--caption-x:max(-13cqw,-21px)}
.f4{--drawing-aspect:1.762634;--bottom-space:.221972;--caption-x:min(5cqw,24px)}
.f4 figcaption{--caption-y:calc(2px - .3em - var(--bottom-space) * var(--drawing-height) - .334866 * (var(--caption-x) - var(--caption-half-width)))}
.f5{--drawing-aspect:5.210046;--bottom-space:.004566}
@media(max-width:1000px){.f3{--caption-x:max(-13cqw,-17px)}}
@media(max-width:650px){.fig{--caption-tracking:1.5px}.f3{--caption-x:max(-13cqw,-11px)}}

/* The closing line stays subordinate to the company details on every page. */
.footer-line{font-size:12px;line-height:1.5}
@media(max-width:650px){.footer-line{font-size:10.5px}}

/* Only direct interaction moves a postcard, keeping its original paper angle. */
.quote-card{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease-out}
.quote-card:focus-visible{outline:2px solid var(--green);outline-offset:6px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .quote-card:hover,.quote-card:nth-child(2):hover,.quote-card:nth-child(3):hover{transform:translate3d(0,-3px,0) rotate(var(--rest-angle))}
}
@media(prefers-reduced-motion:reduce){.quote-card{transition:none}}

/* Monochrome snowflakes keep the same cream colour on emoji-capable devices. */
.snowflake{display:inline-block;width:1em;height:1em;vertical-align:-.12em;color:var(--cream);flex:none}

/* A short placement, followed by tape laid from left to right. No wobble. */
.quote-card{--arrival-delay:0ms}
.tape{--tape-angle:-5deg;transform-origin:0 50%}
.quote-card:nth-child(2) .tape{--tape-angle:5deg}
.quote-card.is-waiting{opacity:.65;transform:translate3d(0,12px,0) rotate(var(--rest-angle))}
.quote-card.is-waiting .tape{opacity:0;transform:rotate(var(--tape-angle)) scaleX(0)}
.quote-card.is-arriving{animation:postcard-place .58s cubic-bezier(.2,.7,.3,1) var(--arrival-delay) both}
.quote-card.is-arriving .tape{animation:tape-lay .42s ease-out calc(var(--arrival-delay) + .12s) both}
@keyframes postcard-place{
  from{opacity:.65;transform:translate3d(0,12px,0) rotate(var(--rest-angle))}
  to{opacity:1;transform:translate3d(0,0,0) rotate(var(--rest-angle))}
}
@keyframes tape-lay{
  from{opacity:0;transform:rotate(var(--tape-angle)) scaleX(0)}
  20%{opacity:1}
  to{opacity:1;transform:rotate(var(--tape-angle)) scaleX(1)}
}
@media(min-width:651px){.quote-card:nth-child(2){--arrival-delay:80ms}.quote-card:nth-child(3){--arrival-delay:160ms}}
@media(prefers-reduced-motion:reduce){.quote-card.is-waiting{opacity:1}.quote-card.is-waiting .tape{opacity:1;transform:rotate(var(--tape-angle))}.quote-card.is-arriving,.quote-card.is-arriving .tape{animation:none}}

/* Reveal letters in place, so neither the line breaks nor the snowflakes move. */
.typewriter-readable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.typewriter-letter{opacity:0}
.typewriter-letter.is-written{opacity:1}
@media(prefers-reduced-motion:reduce){.typewriter-letter{opacity:1}}

/* Draw true circular dots, independent of the browser's dotted-border shape. */
@media(min-width:374px){
  .footer-details nav{position:relative;border-left:2px solid transparent}
  .footer-details nav::before{content:'';position:absolute;left:-2.5px;top:0;bottom:0;width:3px;pointer-events:none;background:radial-gradient(circle,var(--red) 1.5px,transparent 1.6px) center top/3px 8px no-repeat space}
}
