/* A short barber's title card. A single cut opens the two physical panels. */
.site-intro{--intro-seam:calc(50% + 168px);--intro-metal:#cbb48a;display:none;position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;color:#eae3d5;direction:ltr;font-family:var(--body)}
.intro-armed .site-intro,.intro-running .site-intro:not([hidden]){display:block}.intro-running body{overflow:hidden}
.intro-curtain{position:absolute;inset-inline:0;z-index:-1;transition:transform .72s cubic-bezier(.76,0,.24,1);pointer-events:none}
.intro-curtain-top{height:calc(var(--intro-seam) + 1px);top:0;background:#181a16}
.intro-curtain-bottom{top:var(--intro-seam);bottom:0;background:#e6decc}
.intro-curtain-top:after{content:'';position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}
.intro-top{position:absolute;inset-inline:5%;top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.intro-shop-mark{font:600 26px/1 var(--display);letter-spacing:.2px;display:flex;align-items:center;gap:5px}.intro-shop-mark>span{color:#8f8268;font-weight:400;margin-inline:2px}.intro-shop-mark small{font:9px var(--body);letter-spacing:3px;margin-left:16px;color:#b1ac9d}
.intro-skip{display:inline-flex;align-items:center;gap:26px;min-height:44px;padding:11px 0;background:none;border:0;border-bottom:1px solid #80745a;color:#d5c9b1;font:11px var(--body);letter-spacing:.1px;cursor:pointer}
.intro-skip>span{font:20px Arial,sans-serif}.intro-skip:hover{color:#fff1d1;border-color:#e2c797}.intro-skip:focus-visible{outline:2px solid #dcc49a;outline-offset:6px}
.intro-stage{position:absolute;left:50%;top:calc(var(--intro-seam) - 236px);transform:translate(-50%,-50%);width:min(940px,84vw);height:390px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:70px}
.intro-title{padding-top:30px;position:relative;z-index:3;min-width:0}
.intro-caption{font:11px/1.5 var(--body);letter-spacing:1px;color:#bcb29d;margin:0 0 27px}
.intro-name{font:600 clamp(98px,11vw,165px)/.85 var(--display);letter-spacing:-3.5px;color:#e9dfca}
.intro-name-row{display:block;overflow:hidden;padding:0 0 12px;margin-bottom:0}
.intro-name-row>span{display:block}
.intro-number-row{font-size:.78em;color:#bda37a;letter-spacing:-2px}
.intro-number-row>span{display:flex;align-items:center;gap:27px}
.intro-name-rule{display:block;height:1px;width:100px;background:#7b6d50;margin-top:14px}
.intro-greeting{font:italic 34px/1.2 Georgia,serif!important;letter-spacing:-.5px;transform:rotate(-4deg);color:#ded0b1;margin:16px 0 0 7px}
.intro-portrait{margin:0;justify-self:end;width:300px;position:relative;z-index:2;transform:rotate(2deg)}
.intro-frame{height:345px;position:relative;background:#080907;border:1px solid #b39a6f;border-radius:155px 155px 3px 3px;isolation:isolate}
.intro-frame:before{content:'';position:absolute;inset:9px -11px -10px 9px;border:1px solid #806d494d;border-radius:inherit;z-index:-1}
.intro-frame>img{width:100%;height:100%;object-fit:cover;object-position:40% 42%;border-radius:inherit;filter:saturate(.72);opacity:1}
.intro-frame:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,#f5e8ce17,transparent 34%,transparent 78%,#0004);pointer-events:none}
.intro-portrait-edge{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);font:8px/1 var(--body);letter-spacing:3px;background:#181a16;border:1px solid #897752;padding:7px 12px;white-space:nowrap;color:#d2bc94;z-index:1}
.intro-portrait figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;font:8px var(--body);text-transform:uppercase;letter-spacing:2px;color:#9d9f8c;margin-top:24px}
.intro-cut{position:absolute;top:var(--intro-seam);inset-inline:0;height:1px;z-index:5}
.cut-guide{position:absolute;inset:0;border-top:1px dashed #9b886543}
.intro-cut-track{position:absolute;left:5%;width:90%;height:1px;max-width:1600px}
.cut-finished{position:absolute;inset:0;background:#f0dab1;transform:scaleX(0);transform-origin:left}
.intro-scissor{position:absolute;left:0;top:-39px;width:100%;height:78px;transform:translateX(-145px);pointer-events:none}
.intro-scissor svg{display:block;width:142px;height:78px;filter:drop-shadow(0 7px 5px #0005)}
.shear-half{transform-origin:68px 45px}.shear-a{transform:rotate(-10deg)}.shear-b{transform:rotate(10deg)}
.intro-cut-edge{position:absolute;inset-inline:0;top:0;height:2px;background:#f7e5c4;opacity:0}
.intro-bottom{position:absolute;left:7%;right:7%;top:calc(var(--intro-seam) + 39px);bottom:25px;color:#36372c;display:flex;align-items:center;justify-content:space-between;gap:30px}
.intro-bottom>p{font:500 19px/1.5 var(--body);letter-spacing:-.4px;max-width:390px;margin:0}
.intro-bottom>span{font:9px/1.7 var(--body);letter-spacing:1px;color:#736952;text-transform:uppercase;text-align:end}
.intro-bottom i{font-style:normal;display:inline-block;padding:0 12px;color:#a5926b}
/* Arrivals feel weighted; only the scissors repeat, in a bounded four-snip sequence. */
.intro-active .intro-title .intro-caption{animation:intro-rise .7s .05s cubic-bezier(.22,1,.36,1) both}
.intro-active .intro-name-row>span{animation:intro-letter-reveal .9s .08s cubic-bezier(.22,1,.36,1) both}
.intro-active .intro-number-row>span{animation-delay:.18s}
.intro-active .intro-greeting{animation:intro-signature .8s .28s cubic-bezier(.22,1,.36,1) both}
.intro-active .intro-portrait{animation:intro-portrait-arrive 1s .04s cubic-bezier(.22,1,.36,1) both}
.intro-active .intro-frame>img{animation:intro-photo-settle 1.6s .04s cubic-bezier(.22,1,.36,1) both}
.intro-cutting .intro-scissor{animation:intro-cut-travel 1.05s cubic-bezier(.4,0,.6,1) both}
.intro-cutting .cut-finished{animation:intro-cut-line 1.05s cubic-bezier(.4,0,.6,1) both}
.intro-cutting .shear-a{animation:intro-snip-a .2625s ease-in-out 4 forwards}.intro-cutting .shear-b{animation:intro-snip-b .2625s ease-in-out 4 forwards}
.intro-cut-done .intro-cut-edge{opacity:1;transition:opacity .12s}
.intro-stage,.intro-top,.intro-bottom,.intro-cut{transition:opacity .24s}
.site-intro:not(.intro-active) .intro-stage{opacity:0}
.intro-exit .intro-stage,.intro-exit .intro-top,.intro-exit .intro-bottom,.intro-exit .intro-cut{opacity:0}
.intro-exit .intro-curtain-top{transform:translateY(-101%)}.intro-exit .intro-curtain-bottom{transform:translateY(101%)}
@keyframes intro-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-letter-reveal{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes intro-signature{from{opacity:0;transform:translateX(-12px) rotate(-8deg)}to{opacity:1;transform:translateX(0) rotate(-4deg)}}
@keyframes intro-portrait-arrive{from{opacity:0;transform:translateY(24px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(2deg)}}
@keyframes intro-photo-settle{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
@keyframes intro-cut-travel{0%{transform:translateX(-145px)}48%{transform:translateX(45%)}60%{transform:translateX(45%)}100%{transform:translateX(105%)}}
@keyframes intro-cut-line{0%{transform:scaleX(0)}48%,60%{transform:scaleX(.5)}100%{transform:scaleX(1)}}
@keyframes intro-snip-a{0%,100%{transform:rotate(-10deg)}55%{transform:rotate(13deg)}}@keyframes intro-snip-b{0%,100%{transform:rotate(10deg)}55%{transform:rotate(-13deg)}}
.intro-replay{background:transparent;border:0;border-bottom:1px solid #77715f;color:inherit;font:inherit;padding:0 0 2px;cursor:pointer}
[dir=rtl] .intro-caption{font-family:Tahoma,Arial,sans-serif;letter-spacing:0}[dir=rtl] .intro-name{font-family:'Barlow Condensed',Impact,sans-serif}[dir=rtl] .intro-greeting{font:700 33px/1.4 Tahoma,Arial,sans-serif!important;letter-spacing:0;transform:none}[dir=rtl] .intro-bottom>p{font-family:Tahoma,Arial,sans-serif;direction:rtl;letter-spacing:0}[dir=rtl] .intro-skip{font-family:Tahoma,Arial,sans-serif}
@media(min-width:1500px){.intro-stage{width:1080px;gap:130px}.intro-portrait{width:330px}.intro-frame{height:375px}.intro-name{font-size:175px}}
@media(max-width:900px){.intro-stage{width:84vw;gap:45px;grid-template-columns:1fr 1fr}.intro-name{font-size:12vw;letter-spacing:-2px}.intro-portrait{width:260px}.intro-frame{height:310px}.intro-caption{font-size:9px}.intro-greeting{font-size:30px!important}.intro-name-rule{width:70px}.intro-bottom>p{font-size:16px}.intro-bottom>span{font-size:8px}}
@media(max-width:600px){.site-intro{--intro-seam:calc(50% + 167px)}.intro-top{inset-inline:6%;top:19px}.intro-shop-mark{font-size:23px}.intro-shop-mark small{font-size:7px;letter-spacing:2px;margin-left:9px}.intro-skip{font-size:10px;gap:14px;padding:10px 0}.intro-skip>span{font-size:19px}.intro-stage{width:88vw;height:365px;top:calc(var(--intro-seam) - 204px);grid-template-columns:1fr;gap:0;display:block}.intro-title{position:absolute;left:0;top:4px;z-index:3;padding-top:0;width:100%}.intro-caption{font-size:8px;letter-spacing:.4px;margin-bottom:16px}.intro-name{font-size:clamp(79px,23vw,125px);line-height:.82;letter-spacing:-2px;text-shadow:0 2px 18px #181a1666}.intro-name-row{padding-bottom:8px}.intro-number-row{font-size:.65em}.intro-name-rule{width:38px;margin-top:4px}.intro-number-row>span{gap:15px}.intro-greeting{font-size:29px!important;position:absolute;top:252px;left:2px;margin:0;color:#e3d3b5}.intro-portrait{position:absolute;right:7px;bottom:2px;width:214px;margin:0;z-index:2}.intro-frame{height:254px;border-radius:110px 110px 2px 2px}.intro-frame:before{inset:7px -8px -9px 7px}.intro-frame>img{object-position:42% center}.intro-portrait figcaption{margin-top:21px;font-size:6px;letter-spacing:1.1px;gap:12px}.intro-portrait-edge{font-size:6px;padding:6px 8px;letter-spacing:2px;bottom:-9px}.intro-cut-track{left:2%;width:96%}.intro-scissor{height:62px;top:-31px}.intro-scissor svg{height:62px;width:113px}.intro-bottom{top:calc(var(--intro-seam) + 25px);bottom:20px;inset-inline:7%;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}.intro-bottom>p{font-size:16px;line-height:1.5;max-width:280px}.intro-bottom>span{font-size:7px;letter-spacing:.6px;text-align:start}.intro-bottom i{padding:0 7px}[dir=rtl] .intro-greeting{font-size:26px!important}[dir=rtl] .intro-caption{font-size:9px}}
@media(max-width:360px){.intro-stage{height:345px;top:calc(var(--intro-seam) - 190px)}.intro-portrait{width:190px;right:4px}.intro-frame{height:230px}.intro-title{top:8px}.intro-greeting{top:235px;font-size:25px!important}.intro-name{font-size:80px}.intro-bottom>p{font-size:14px}.intro-caption{font-size:7px}}
@media(max-height:650px) and (min-width:601px){.site-intro{--intro-seam:calc(50% + 118px)}.intro-top{top:16px}.intro-stage{height:270px;top:calc(var(--intro-seam) - 165px);width:78vw}.intro-portrait{width:200px}.intro-frame{height:220px}.intro-name{font-size:95px}.intro-caption{margin-bottom:16px;font-size:9px}.intro-greeting{font-size:26px!important;margin-top:8px}.intro-bottom{top:calc(var(--intro-seam) + 20px);bottom:15px}.intro-bottom>p{font-size:15px}.intro-portrait figcaption{margin-top:20px}}
@media(max-height:690px) and (max-width:600px){.site-intro{--intro-seam:calc(50% + 133px)}.intro-stage{height:320px;top:calc(var(--intro-seam) - 178px)}.intro-title{top:10px}.intro-name{font-size:80px}.intro-portrait{width:190px;bottom:0}.intro-frame{height:220px}.intro-greeting{top:235px;font-size:25px!important}.intro-caption{margin-bottom:12px}.intro-bottom{top:calc(var(--intro-seam) + 20px);bottom:17px;gap:9px}.intro-bottom>p{font-size:14px}.intro-bottom>span{font-size:6px}}
@media(max-height:480px){.site-intro{--intro-seam:calc(50% + 100px)}.intro-stage{width:76vw;height:215px;top:calc(var(--intro-seam) - 137px);display:grid;grid-template-columns:1fr 1fr;gap:25px}.intro-title{position:relative;top:auto;left:auto;padding:0}.intro-name{font-size:72px}.intro-caption{font-size:7px;margin-bottom:10px}.intro-greeting{display:none}.intro-portrait{position:relative;right:auto;bottom:auto;width:160px}.intro-frame{height:180px}.intro-portrait figcaption{margin-top:17px;font-size:6px}.intro-top{top:10px}.intro-bottom{top:calc(var(--intro-seam) + 12px);bottom:9px;flex-direction:row;justify-content:space-between;align-items:center;gap:15px}.intro-bottom>p{font-size:12px}.intro-bottom>span{font-size:6px}.intro-scissor{top:-26px;height:52px}.intro-scissor svg{height:52px;width:95px}}
.motion-paused .site-intro *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.site-intro,.intro-armed .site-intro,.intro-running .site-intro:not([hidden]),.intro-replay{display:none!important}.intro-running body{overflow:auto}}
