/* Two Ways In — homepage styles */

  /* One deliberate look from Shené's comp: warm cream paper | tomato-red paper, collage centre. */
  @property --split{syntax:"<percentage>";inherits:true;initial-value:50%}
  :root{
    --cream:#F6EDDC; --red:#D63A33; --ink:#161616; --ink-soft:#5A554C; --white:#FFFFFF; --btn:#272727;
    --teal:#6BBCB6; --mustard:#DDB841; --paper:#EFE4CF; --paper-2:#E6D9BF;
    --serif:"Playfair","Playfair Display","Didot","Bodoni 72",Georgia,serif;
    --sans:"Figtree","Helvetica Neue",system-ui,sans-serif;
    --hand:"Caveat","Bradley Hand",cursive;
    --ease:cubic-bezier(.2,.8,.2,1);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .12 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grid:repeating-linear-gradient(0deg,transparent 0 13px,rgba(20,60,60,.35) 13px 14px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(20,60,60,.3) 17px 18px);
    --stripes:repeating-linear-gradient(-45deg,var(--ink) 0 3px,transparent 3px 9px);
  }
  html,body{height:100%}
  body{background:var(--cream);color:var(--ink);font-family:var(--sans)}
  a{color:inherit}

  .stage{--split:50%;position:relative;min-height:100%;overflow:hidden;isolation:isolate;transition:--split .9s var(--ease)}
  .stage:has(.left:hover),.stage:has(.left:focus-within){--split:53%}
  .stage:has(.right:hover),.stage:has(.right:focus-within){--split:47%}
  .half{position:absolute;top:0;bottom:0;z-index:-3}
  .half.l{left:0;width:var(--split);background:var(--grain),radial-gradient(120% 90% at 30% 40%,#FAF3E6,var(--cream) 60%,#EFE3CC);animation:inL 1s var(--ease) both}
  .half.r{left:var(--split);right:0;background:var(--grain),radial-gradient(120% 90% at 70% 40%,var(--red),var(--red) 55%,#C2312B);animation:inR 1s var(--ease) both}
  @keyframes inL{from{transform:translateX(-100%)}}
  @keyframes inR{from{transform:translateX(100%)}}

  /* masthead */
  .top{position:absolute;top:clamp(22px,4vh,40px);left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,12px);z-index:4;white-space:nowrap}
  .top .row{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
  .top .sub{margin:0;display:flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:700;font-size:clamp(14px,1.45vw,26px);letter-spacing:.2em;text-transform:uppercase;animation:up .7s 1s var(--ease) both}
  .star{width:.8em;height:1em;flex:none;display:inline-block}
  .top .rule{width:clamp(44px,6.5vw,130px);height:2px;background:var(--ink);animation:draw .8s .9s var(--ease) both}
  .top h1{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,56px);letter-spacing:.3em;text-transform:uppercase;padding-left:.42em;animation:fade .8s .8s var(--ease) both}
  @keyframes draw{from{transform:scaleX(0)}}
  @keyframes fade{from{opacity:0;letter-spacing:.9em}}

  /* columns */
  .cols{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);z-index:3;pointer-events:none}
  .side{pointer-events:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(14px,2.6vh,26px);padding-block:clamp(200px,28vh,300px) clamp(60px,9vh,100px);box-sizing:border-box}
  .side .mast{min-height:calc(clamp(64px,7.2vw,134px) * 1.8);display:flex;flex-direction:column;justify-content:flex-end}
  .left{padding-left:clamp(20px,4.2vw,80px);max-width:clamp(300px,27vw,520px)}
  .right{justify-self:end;padding-right:clamp(20px,2.2vw,48px);width:28vw;color:var(--white)}
  .eyebrow{display:flex;align-items:center;gap:14px;font-size:clamp(14px,1.15vw,20px);letter-spacing:.04em;animation:up .7s 1.1s var(--ease) both}
  .eyebrow::after{content:"";width:clamp(36px,3.6vw,62px);height:1.5px;background:currentColor}
  .right .eyebrow{color:var(--white);animation-delay:1.2s}
  .mast{margin:0;font-family:var(--serif);font-weight:800;line-height:.82;letter-spacing:-.02em}
  .left .mast{font-size:clamp(64px,7.2vw,134px);font-variation-settings:"opsz" 1200}
  .left .mast .ln{display:block;width:max-content;overflow:hidden;padding-bottom:.08em;padding-right:.18em;margin-right:-.18em}
  .left .mast .ln span{display:block;animation:rise .9s var(--ease) both}
  .left .mast .ln:nth-child(1) span{animation-delay:1.25s}
  .left .mast .ln:nth-child(2) span{animation-delay:1.4s;font-style:italic;font-weight:700}
  .sh-letter{display:block;width:calc(100% + 3.2vw);margin-left:-3.2vw;height:auto;overflow:visible;transform-origin:30% 60%;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
  .right:hover .sh-letter{transform:rotate(-2deg) scale(1.03)}
  @keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -5% 0 0)}}
  .right .mast .sh-letter{animation:write 1.3s 1.5s cubic-bezier(.6,.1,.3,1) both}
  .right .mast{color:var(--white);white-space:nowrap;font-size:clamp(52px,6.1vw,116px);font-weight:900;font-stretch:87.5%;font-variation-settings:"opsz" 1200;letter-spacing:-.035em}
  @keyframes rise{from{transform:translateY(105%)}}
  @keyframes slam{from{opacity:0;transform:translateX(40px) skewX(-12deg)}}
  .lede{margin:0;font-size:clamp(15px,1.2vw,22px);line-height:1.6;letter-spacing:.01em;max-width:24em;animation:up .7s 1.8s var(--ease) both}
  .left .lede{color:#2A2723}
  @keyframes up{from{opacity:0;transform:translateY(14px)}}
  .cta{align-self:flex-start;display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,26px);text-decoration:none;font-weight:600;font-size:clamp(16px,1.3vw,22px);
    padding:clamp(14px,1.5vw,22px) clamp(24px,2.4vw,40px);margin-top:clamp(6px,1.4vh,14px);animation:up .7s 2s var(--ease) both;transition:background-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
  .cta svg{width:1.6em;height:1em;flex:none;transition:transform .3s var(--ease)}
  .left .cta{border:1.5px solid var(--ink);color:var(--ink)}
  .left .cta:hover svg,.left .cta:focus-visible svg{transform:translateX(-6px)}
  .left .cta:hover,.left .cta:focus-visible{background:var(--ink);color:var(--cream)}
  .right .cta{background:var(--btn);color:var(--white);animation-delay:2.1s}
  .right .cta:hover svg,.right .cta:focus-visible svg{transform:translateX(6px)}
  .right .cta:hover,.right .cta:focus-visible{transform:translateY(-3px);box-shadow:0 8px 0 -2px rgba(0,0,0,.28)}
  .cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  .right .cta:focus-visible{outline-color:var(--white)}
  .for{margin:0;font-size:clamp(16px,1.35vw,24px);font-weight:700;line-height:1.5;max-width:21em;animation:up .7s 2.2s var(--ease) both}
  .left .for{color:#2E2A24}
  .right .for{color:var(--white)}
  .foot{position:absolute;right:clamp(20px,3vw,64px);bottom:clamp(16px,3vh,30px);z-index:4;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.5em .9em;
    color:var(--white);font-size:clamp(14px,1vw,17px);font-weight:600;letter-spacing:.02em;animation:up .7s 2.3s var(--ease) both}
  .foot a{text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.55);padding-bottom:1px;transition:border-color .2s}
  .foot a:hover,.foot a:focus-visible{border-color:#fff}
  .foot a:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .foot .star{width:.7em;opacity:.85}
  .motto{position:absolute;left:clamp(20px,4.2vw,80px);bottom:clamp(16px,3vh,30px);z-index:4;margin:0;font-family:var(--sans);font-weight:800;
    font-size:clamp(14px,1.05vw,18px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);animation:up .7s 2.3s var(--ease) both}
  .phone-note{display:none;margin:0;font-size:15px;line-height:1.5;border:1.5px dashed rgba(255,255,255,.8);padding:12px 14px}

  /* ---------- portrait: collage + 8 head poses ---------- */
  .portrait{position:absolute;bottom:0;left:48.5%;translate:-50% 0;width:min(46vw,92svh);z-index:2;margin:0;animation:emerge 1.3s .7s var(--ease) both}
  .frame{position:relative;aspect-ratio:1;width:100%}
  .pc{position:absolute;display:block;transition:translate .7s var(--ease);box-shadow:1px 2px 0 rgba(0,0,0,.06)}
  .pc.y1{left:17%;top:14%;width:20%;height:22%;background:var(--grain),var(--mustard);animation:drop .9s 1.2s var(--ease) both}
  .pc.b1{left:12%;top:24%;width:12%;height:34%;background:var(--grain),var(--paper);animation:drop .9s 1.3s var(--ease) both}
  .pc.b1 i{position:absolute;inset:8% 10%;font:500 clamp(14px,1.4vw,26px)/1 var(--hand);color:rgba(22,22,22,.55);writing-mode:vertical-rl;transform:rotate(180deg);font-style:normal}
  .pc.y2{left:9%;top:44%;width:17%;height:20%;background:var(--grain),var(--mustard);animation:drop .9s 1.4s var(--ease) both}
  .pc.t1{right:13%;top:5%;width:17%;height:44%;background:var(--grid),var(--teal);animation:drop .9s 1.25s var(--ease) both}
  .pc.k1{right:23%;top:12%;width:7%;height:12%;background:var(--grain),#2E2E2E;animation:drop .9s 1.35s var(--ease) both}
  .pc.b2{right:18%;top:1%;width:10%;height:9%;background:var(--grain),var(--paper-2);animation:drop .9s 1.3s var(--ease) both}
  .pc.b3{right:7%;top:36%;width:14%;height:28%;background:var(--grain),var(--paper);animation:drop .9s 1.45s var(--ease) both}
  .pc.t2{right:4%;top:55%;width:12%;height:22%;background:var(--grid),var(--teal);animation:drop .9s 1.5s var(--ease) both}
  .pc.x1,.pc.x2{width:8%;aspect-ratio:1;border-radius:50%;box-shadow:none;animation:drop .9s 1.6s var(--ease) both}
  .pc.x1{right:1%;top:48%;background:var(--paper)}
  .pc.x2{right:3%;top:58%;background:var(--mustard);animation-delay:1.7s}
  .pc.x1::before,.pc.x1::after,.pc.x2::before,.pc.x2::after{content:"";position:absolute;left:50%;top:12%;width:1.5px;height:76%;background:var(--ink);rotate:45deg}
  .pc.x1::after,.pc.x2::after{rotate:-45deg}
  .pc.sl{right:24%;top:28%;width:10%;height:9%;background:repeating-linear-gradient(-55deg,transparent 0 9px,var(--ink) 9px 13px,transparent 13px 20px);box-shadow:none;animation:drop .9s 1.55s var(--ease) both}
  .pc.bt1{left:6%;bottom:0;width:20%;height:13%;background:var(--grid),var(--teal);animation:drop .9s 1.5s var(--ease) both}
  .pc.bt2{left:16%;bottom:3%;width:22%;height:8%;background:var(--grain),var(--mustard);rotate:-3deg;z-index:3;animation:drop .9s 1.6s var(--ease) both}
  .pc.bt3{right:22%;bottom:2%;width:26%;height:11%;background:var(--stripes),var(--paper);z-index:3;animation:drop .9s 1.65s var(--ease) both}
  .pc.bt4{right:1%;bottom:5%;width:22%;height:10%;background:var(--grain),var(--teal);z-index:3;animation:drop .9s 1.7s var(--ease) both}
  .doodle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .doodle path{stroke-dasharray:1;stroke-dashoffset:1;animation:ink 2.4s 1.6s var(--ease) forwards}
  @keyframes ink{to{stroke-dashoffset:0}}
  .poses{position:absolute;inset:0;z-index:2;-webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .poses{transform-origin:50% 90%;transition:transform .5s var(--ease)}
  .poses img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
  .poses img.on{opacity:1}
  @keyframes emerge{from{opacity:0;transform:translateY(24%)}}
  @keyframes drop{from{opacity:0;transform:translateY(-30px) rotate(-6deg)}}

  /* decor */
  .decor{position:absolute;z-index:1;pointer-events:none;transition:translate .6s var(--ease)}
  .tr{top:0;right:0;width:clamp(170px,16vw,280px);height:clamp(130px,18vh,180px);animation:drop 1s 1s var(--ease) both}
  .tr span{position:absolute;display:block}
  .tr .c1{left:0;top:0;width:36%;height:48%;background:var(--grain),var(--paper)}
  .tr .c2{left:24%;top:0;width:48%;height:62%;background:var(--grid),var(--teal)}
  .tr .c3{right:0;top:0;width:36%;height:34%;background:var(--grain),var(--paper)}
  .tr .c4{right:0;top:30%;width:26%;height:62%;background:var(--grain),var(--mustard)}
  .tr .c5{right:8%;top:38%;width:44%;height:26%;background:var(--stripes)}
  .bl{left:-7vw;bottom:-15vh;width:clamp(160px,15vw,270px);height:clamp(120px,16vh,160px);animation:drop 1s 1.1s var(--ease) both}
  .bl .ring{position:absolute;left:24%;top:4%;width:62%;aspect-ratio:1;border:1.2px solid var(--ink);border-radius:50%}
  .bl .dot{position:absolute;left:62%;top:26%;width:34%;aspect-ratio:1;background:var(--grain),var(--mustard);border-radius:50%}
  .bl .stripe{position:absolute;left:0;bottom:0;width:66%;height:46%;background:var(--stripes)}
  .br{right:-6%;bottom:-24%;width:clamp(180px,18vw,300px);aspect-ratio:1;border:1.4px solid var(--ink);border-radius:50%;animation:fadeIn 1.2s 1.3s both}
  @keyframes fadeIn{from{opacity:0}}

  /* tablet & phone: stacked */
  @media (max-width:1000px), (max-aspect-ratio:5/4){
    .half,.br,.bl{display:none}
    .top{position:relative;top:auto;left:auto;translate:none;justify-content:center;padding-top:28px;padding-inline:16px}
    .top h1{white-space:normal;text-align:center}
    .portrait{position:relative;left:auto;translate:none;width:min(94%,560px);margin:10px auto 0}
    .cols{grid-template-columns:1fr;min-height:0}
    .side{padding-block:48px 56px;max-width:none;width:auto;padding-inline:clamp(20px,7vw,64px)}
    .left{background:var(--grain),var(--cream);border-top:1.5px solid var(--ink)}
    .right{justify-self:stretch;background:var(--grain),var(--red)}
    .side .mast{min-height:0}
    .right .mast{font-size:clamp(44px,12vw,80px)}
    .sh-letter{max-width:460px;width:100%;margin-left:0}
    .tr{width:130px;height:96px}
    .top{gap:8px}
    .top .sub{white-space:normal;flex-wrap:wrap;justify-content:center;font-size:14px;letter-spacing:.14em}
    .motto{position:static;display:block;text-align:center;background:var(--grain),var(--cream);padding:18px 20px 22px;border-top:1.5px solid var(--ink)}
    .foot{position:static;justify-content:flex-start;background:var(--grain),var(--red);padding:22px clamp(20px,7vw,64px) 30px;border-top:1.5px solid rgba(255,255,255,.4)}
  }
  @media (max-width:640px){
    .right .cta{display:none}
    .phone-note{display:block}
    .tr{display:none}
  }
  /* Return visits: same choreography, compressed so the buttons are ready almost at once */
  .repeat :is(.half,.top h1,.top .rule,.top .sub,.eyebrow,.mast .ln span,.sh-letter,.lede,.cta,.for,.foot,.motto,.portrait,.pc,.decor){animation-delay:0s!important;animation-duration:.45s!important}

  /* ---------- Easter eggs (drawn over the straight-on pose) ---------- */
  .fx{position:absolute;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;overflow:visible}
  .fx .lid{opacity:0}
  .fx.wink .lid.r{opacity:1}
  
  .fx .bubble{transform-box:fill-box;transform-origin:50% 50%}
  .facebtn{position:absolute;left:33%;top:14%;width:34%;height:40%;border-radius:45%;z-index:60;background:transparent;border:0;cursor:pointer;padding:0}
  .facebtn:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
  .ha{position:absolute;z-index:61;font:700 clamp(28px,3vw,52px)/1 var(--hand);color:var(--ink);pointer-events:none;white-space:nowrap}
  .pop{position:absolute;z-index:61;font:900 clamp(26px,3vw,52px)/1 var(--serif);color:#E8589B;-webkit-text-stroke:1.5px var(--ink);pointer-events:none;letter-spacing:.02em}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.doodle path{stroke-dashoffset:0}}

  /* WordPress admin bar */
  body.admin-bar .stage{min-height:calc(100vh - 32px)}
  @media (max-width:782px){body.admin-bar .stage{min-height:calc(100vh - 46px)}}