.sf-home{background:#fbf9f4;max-width:none;padding-left:max(28px,calc((100vw - 1344px)/2));padding-right:max(28px,calc((100vw - 1344px)/2))}.sf-hero{position:relative;isolation:isolate;overflow:hidden;background:#eeeae0;min-height:580px;border-radius:4px;padding:65px 55px}.sf-hero:before{content:"";position:absolute;z-index:-1;right:-100px;top:-180px;width:620px;height:620px;border:1px solid #bdc9bc99;border-radius:46% 54% 65% 35%;animation:sf-organic 28s linear infinite}.sf-hero:after{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:10%;bottom:-300px;background:#cad8c660;filter:blur(20px);border-radius:50%}.sf-hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(40px,4.8vw,72px);line-height:1.07;letter-spacing:-2.6px}.sf-hero h1 em{color:#245d58;font-weight:400}.sf-hero p{font-size:16px;max-width:480px}.sf-kicker{letter-spacing:2.8px;font-size:10px}.sf-hero .actions button:first-child{background:#173b3e;border:1px solid #173b3e}.sf-hero .actions button{padding:15px 23px;border-radius:3px}.sf-hero-art{position:relative;gap:20px;transform:translateY(var(--sf-depth,0px));transition:transform .15s linear}.sf-hero-art>div{border-radius:3px;box-shadow:0 12px 32px #36443e10;background:#ffffffdd}.sf-hero-art>div:first-child{transform:rotate(-5deg)}.sf-hero-art>div:nth-child(2){transform:rotate(5deg)}.sf-hero-art>div:nth-child(3){transform:rotate(2deg)}.sf-section-head h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:34px}.sf-category{border-radius:3px;background:#fffefa;transition:box-shadow .3s,transform .3s}.sf-category img{transition:transform .45s}.sf-category:hover img{transform:scale(1.045)}.sf-category:hover{box-shadow:0 15px 28px #173b3e0c}.sf-product-card{border-radius:4px}.sf-card-image{position:relative;overflow:hidden}.sf-card-image img{transition:opacity .5s,transform .6s}.sf-card-image:hover>img:first-child{transform:scale(1.035)}.sf-card-image img.sf-hover-image{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:contain;opacity:0}.sf-card-image:hover img.sf-hover-image{opacity:1}.sf-card-image:has(.sf-hover-image):hover>img:first-child{opacity:0}.sf-card-image .sf-hover-image[hidden]{display:none}.sf-marquee{overflow:hidden;border-top:1px solid #d8dfd6;border-bottom:1px solid #d8dfd6;margin:18px 0 35px;color:#315d58;padding:19px 0}.sf-marquee-track{display:flex;gap:45px;width:max-content;animation:sf-marquee 45s linear infinite;font-family:Georgia,serif;font-size:21px}.sf-marquee-track span{white-space:nowrap}.sf-marquee:hover .sf-marquee-track{animation-play-state:paused}.sf-story{display:grid;grid-template-columns:1.1fr 1fr;gap:75px;margin:80px 0 35px;align-items:start}.sf-story-image{position:sticky;top:35px;background:#e6ece3;padding:50px 35px;min-height:480px;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:hidden;border-radius:3px}.sf-story-image:before{content:"";position:absolute;inset:25px;border:1px solid #a4b7a5;border-radius:48% 48% 3px 3px;pointer-events:none}.sf-story-image img{width:100%;height:320px;object-fit:contain;position:relative;z-index:1}.sf-story-image p{font-family:Georgia,serif;font-style:italic;font-size:22px;position:relative}.sf-story-copy h2{font:400 43px/1.12 Georgia,serif;letter-spacing:-1px;margin:15px 0 30px}.sf-story-step{padding:35px 0 60px;border-top:1px solid #d5dfd4}.sf-story-step span{font-size:11px;color:#436d64;letter-spacing:2px}.sf-story-step h3{font:400 28px/1.2 Georgia,serif}.sf-story-step p{color:#5b6b64;line-height:1.8;max-width:420px}.sf-motion-toggle{position:absolute;top:15px;right:18px;background:transparent!important;color:#385e58!important;border:1px solid #b9c8bd!important;padding:6px 10px!important;border-radius:20px!important;font-size:10px!important;z-index:2}.sf-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.sf-reveal.sf-visible{opacity:1;transform:translateY(0)}#sf-cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#285e5960;pointer-events:none;z-index:9000;opacity:0;display:grid;place-items:center;font:500 11px system-ui;color:white;transition:width .2s,height .2s,background .2s,opacity .2s;will-change:transform;white-space:nowrap}#sf-cursor.sf-cursor-action{width:64px;height:64px;background:#173b3ee8}#sf-cursor span{display:none}#sf-cursor.sf-cursor-action span{display:block}.ordering-dialog{max-width:660px!important;padding:40px!important;background:#fbf9f4!important;border-radius:18px!important}.ordering-kicker{font-size:10px;letter-spacing:2px;color:#486b60}.ordering-dialog h2{font:400 38px/1.12 Georgia,serif;letter-spacing:-1px;max-width:450px;margin:20px 0}.ordering-dialog>p{line-height:1.7;color:#53665e}.ordering-summary{font-size:12px;color:#496758;margin:20px 0}.ordering-choices{display:grid;gap:12px;margin:25px 0}.ordering-choices button{display:grid;grid-template-columns:30px 1fr 20px;gap:3px 12px;text-align:left;background:#fff;color:#173b3e;border:1px solid #d8e1d4;padding:20px;border-radius:10px;transition:background .25s,transform .25s}.ordering-choices button:hover{background:#eaf0e4;transform:translateY(-2px)}.ordering-choices button>span{grid-row:span 2;color:#7f9687;font:italic 19px Georgia,serif}.ordering-choices button>b{font-size:16px}.ordering-choices button>small{grid-column:2;font-size:12px;line-height:1.5;color:#5c7166;font-weight:400}.ordering-choices button>i{grid-column:3;grid-row:1;font-style:normal}.ordering-split{background:#e7eddf;border-radius:10px;padding:22px;margin:20px 0}.ordering-split p{font-size:13px;line-height:1.6}.ordering-dialog label{display:block;margin:16px 0 8px}.ordering-dialog textarea,.ordering-dialog input{width:100%}.ordering-dialog input[type=checkbox]{width:auto}.ordering-dialog .actions button{font-size:12px}.ordering-dialog .cartrow{font-size:13px;padding:13px 0}.ordering-dialog .cartrow p{margin:5px 0}.ordering-dialog #ordering-pay{width:100%;margin:18px 0}.sf-product-help:hover{text-decoration-thickness:2px}.sf-hero button svg{transition:transform .3s}.sf-hero button:hover svg{transform:translateX(4px)}.techplo-motion-off *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.techplo-motion-off .sf-reveal{opacity:1;transform:none}.techplo-motion-off #sf-cursor{display:none}.techplo-motion-off .sf-hero-art{transform:none}.techplo-motion-off .sf-marquee-track{animation:none;flex-wrap:wrap;width:auto}.techplo-motion-off .sf-marquee-track [aria-hidden]{display:none}
@keyframes sf-organic{to{transform:rotate(360deg)}}@keyframes sf-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sf-reveal{opacity:1;transform:none}.sf-hero:before,.sf-marquee-track{animation:none!important}.sf-hero-art{transform:none!important}#sf-cursor{display:none!important}.sf-card-image img,.sf-category img,.sf-category,.ordering-choices button{transition:none!important}.sf-marquee-track{flex-wrap:wrap;width:auto}.sf-marquee-track [aria-hidden]{display:none}}
@media(max-width:900px){.sf-hero{padding:45px 30px;min-height:450px}.sf-story{gap:30px}.sf-story-image{padding:35px 20px;min-height:380px}.sf-story-copy h2{font-size:35px}.sf-story-image img{height:270px}}
@media(max-width:700px){.sf-home{padding-left:18px;padding-right:18px}.sf-hero{padding:45px 25px 25px}.sf-hero h1{font-size:42px;letter-spacing:-1.4px}.sf-section-head h2{font-size:27px}.sf-story{grid-template-columns:1fr;margin-top:45px;gap:20px}.sf-story-image{position:relative;top:auto;min-height:320px}.sf-story-image img{height:240px}.sf-story-step{padding:25px 0}.sf-story-copy h2{font-size:34px}.ordering-dialog{padding:28px 22px!important}.ordering-dialog h2{font-size:31px}.sf-marquee-track{font-size:18px}.sf-card-image img.sf-hover-image{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}}

.sf-marquee-track{gap:0}.sf-marquee-track span{padding-right:45px}


/* Techplo layout repair — 18 October 2026 */
.sf-story{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sf-story>*{min-width:0}
.sf-story-image p{overflow-wrap:break-word}
#modal{overflow-y:auto;box-sizing:border-box;padding:20px}
#modal .dialog{
  box-sizing:border-box;
  width:min(100%,900px);
  max-width:100%;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
#modal .ordering-dialog{max-width:660px}
#modal .dialog input,#modal .dialog textarea,
#modal .dialog select{box-sizing:border-box;max-width:100%}
#modal .dialog .actions{flex-wrap:wrap}
@media(max-width:700px){
  .sf-story{grid-template-columns:minmax(0,1fr)}
  #modal{padding:12px}
  #modal .dialog{max-height:calc(100dvh - 24px)}
}