/* SPI Packaging
   Layout: a paper merchant's sample book. Left-aligned 12-col grid, sharp 2px corners, white board pages and kraft sheets.
   The one memorable moment is the packaging studio in the hero: a 3D box or bag the visitor prints with their own brand.
   Single light theme by choice: it is paper. */

/* ---------- tokens ---------- */
:root{
  --ink:#1B2B4B;        /* navy from the logo: text, header, buttons */
  --ink-soft:#2C3E63;
  --board:#FCFCFA;      /* SBS board white: page */
  --kraft:#C49C6E;      /* kraft sheet surface */
  --kraft-deep:#8A6440; /* kraft shadow, rules on kraft */
  --foil:#C6A14A;       /* foil gold: logo, foil, focus */
  --carbon:#5B606B;     /* secondary text */
  --rule:#D9D6CE;
  --display:"Anek Latin", "Arial Narrow", system-ui, sans-serif;
  --body:"Anek Latin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:2px;
  --wrap:1180px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--board);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--board)}
@media (min-width:900px){body{font-size:18px}}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--foil);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,7vw,5.4rem);font-variation-settings:"wdth" 78;font-weight:760}
h2{font-size:clamp(2rem,4.4vw,3.3rem);font-variation-settings:"wdth" 80}
h3{font-size:1.5rem;font-variation-settings:"wdth" 90}
p{margin:0;text-wrap:pretty}
.lede{font-size:1.18em;max-width:34ch;color:var(--ink-soft)}
.sel{user-select:all}
.plain-link{text-decoration:none}
.plain-link:hover{text-decoration:underline;text-underline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--ink);color:var(--board);padding:10px 16px;border-radius:var(--r);text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------- header ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--board);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.mark .m-swan{height:56px;width:auto;display:block}
.mark .m-words{display:grid;gap:5px;justify-items:center}
.mark .m-spi{height:26px;width:auto;display:block}
.mark .m-pk{font-size:10.5px;font-weight:600;letter-spacing:.34em;margin-right:-.34em;line-height:1;color:var(--ink);border-top:1.5px solid var(--foil);padding-top:5px}
nav{display:flex;gap:22px;font-size:.98rem}
nav a{text-decoration:none;padding:10px 2px}
nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){nav{display:none}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--ink);color:var(--board);text-decoration:none;font-weight:600;font-size:1rem;border:0;cursor:pointer;font-family:inherit;transition:background .15s}
.btn:hover{background:var(--ink-soft)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.95rem}
.link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:1px;padding:12px 0}

/* ---------- hero: a die-cut paper sheet holds the headline; the studio and its options sit on their own paper panels ---------- */
.hero{position:relative;overflow:hidden;background:#ECE7DE}
.hero .wrap{position:relative;display:grid;max-width:none;padding:0;gap:0;align-items:center;
  grid-template-columns:minmax(max(16px,env(safe-area-inset-left,0px)),1fr) minmax(0,470px) minmax(0,860px) minmax(max(16px,env(safe-area-inset-right,0px)),1fr)}
.hero-sheet{grid-column:1/3;grid-row:1;align-self:stretch;position:relative;z-index:0;margin-right:-20px;filter:drop-shadow(8px 0 16px rgba(80,60,30,.14)) drop-shadow(1px 0 0 rgba(80,60,30,.10))}
.hero-sheet::before{content:"";position:absolute;inset:0;background:#F8F5EF;
  clip-path:polygon(0 0,100% 0,100% 30%,calc(100% - 52px) calc(30% + 52px),calc(100% - 52px) 100%,0 100%);
  -webkit-mask:radial-gradient(circle 20px at calc(100% - 52px) 74%,transparent 19px,#000 20px);mask:radial-gradient(circle 20px at calc(100% - 52px) 74%,transparent 19px,#000 20px)}
.hero-text{grid-column:2;grid-row:1;position:relative;z-index:1;display:grid;gap:24px;min-width:0;padding:64px 84px 64px 0}
.hero h1{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;font-weight:400;font-variation-settings:normal;font-size:clamp(2.6rem,4.3vw,4.25rem);line-height:1.02;letter-spacing:-.01em}
.hero .lede{color:#5C5850;font-size:1.08em}
.hero-photo{grid-column:3;grid-row:1;position:relative;z-index:1;margin:0;min-width:0;padding:40px 0 40px 36px}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.since{font-size:.95rem;color:var(--carbon);border-top:1.5px solid var(--foil);padding-top:16px;max-width:40ch} /* the gold rule from the logo */
.fin{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.18)}
.fin.ink{background:var(--ink)}
.fin.foil{background:linear-gradient(135deg,#9C7A2E 0%,#E8CF85 45%,#B8923C 70%,#F2DD9C 100%);border-color:#9C7A2E}
.fin.uv{background:radial-gradient(circle at 35% 30%,#fff 0 22%,#C9CDD4 60%,#9AA0AA 100%)}
@media (max-width:1180px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-sheet{display:none}
  .hero-text{grid-column:1;padding:36px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px));background:#F8F5EF}
  .hero-photo{grid-column:1;grid-row:auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
}

/* ---------- packaging studio ---------- */
.bench{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.stage{position:relative;min-height:470px;perspective:1100px;display:grid;place-items:center;cursor:grab;touch-action:pan-y;overflow:hidden;user-select:none;
  background:#F4F0E9 radial-gradient(ellipse 55% 30% at 50% 82%,rgba(80,60,30,.16),transparent 70%);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(80,60,30,.08),0 24px 40px -30px rgba(80,60,30,.38)}
.stage:active{cursor:grabbing}
.crop{position:absolute;width:22px;height:22px;opacity:.5;border-color:#7A6A55}
.crop.tl{top:18px;left:18px;border-top:1px solid;border-left:1px solid}
.crop.tr{top:18px;right:18px;border-top:1px solid;border-right:1px solid}
.crop.bl{bottom:18px;left:18px;border-bottom:1px solid;border-left:1px solid}
.crop.br{bottom:18px;right:18px;border-bottom:1px solid;border-right:1px solid}
.stage-cap{position:absolute;left:50px;bottom:14px;font-size:13px;color:var(--carbon)}
.cmyk{position:absolute;right:50px;bottom:18px;display:flex;gap:3px}
.cmyk i{width:10px;height:10px;display:block}

/* the 3D object: six faces sized from --w/--h/--d */
.obj{--w:160px;--h:200px;--d:70px;--rx:-16deg;--ry:-34deg;position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(10px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.obj.dragging{transition:none}
.face{position:absolute;left:0;top:0;backface-visibility:hidden;background-color:var(--stock);overflow:hidden;transition:background-color .3s,width .5s,height .5s,transform .5s,margin .5s}
.face::after{content:"";position:absolute;inset:0;background:var(--shade,transparent);pointer-events:none}
.f-front{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform:translateZ(calc(var(--d)/2))}
.f-back{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform:rotateY(180deg) translateZ(calc(var(--d)/2));--shade:rgba(0,0,0,.18)}
.f-right{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2));--shade:rgba(0,0,0,.16)}
.f-left{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));--shade:rgba(0,0,0,.24)}
.f-top{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);transform:rotateX(90deg) translateZ(calc(var(--h)/2));--shade:rgba(255,255,255,.14)}
.f-bot{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);transform:rotateX(-90deg) translateZ(calc(var(--h)/2));--shade:rgba(0,0,0,.3)}

/* paper stocks */
.obj.kraft{--stock:#B98B5E;--print:#1B2B4B}
.obj.kraft .face{background-image:repeating-linear-gradient(97deg,rgba(90,60,30,.06) 0 2px,transparent 2px 5px)}
.obj.white{--stock:#F8F8F5;--print:#1B2B4B}
.obj.navy{--stock:#1C2C4E;--print:#F2F3F0}
.obj.black{--stock:#1E1F22;--print:#F2F3F0}
.obj.olive{--stock:#6B6E3C;--print:#F4F2E6}
.obj.mustard{--stock:#D9A21E;--print:#1B2B4B}

/* print on the front face */
.art{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:12px}
.brand{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;font-size:var(--bs,26px);line-height:1.02;color:var(--print);max-width:100%;overflow-wrap:anywhere}
.prule{width:44px;height:2px;background:var(--print);opacity:.85}
.box-logo{display:none;height:calc(var(--h) * .72);width:auto;max-width:100%;object-fit:contain;position:relative}
.obj.is-logo .box-logo{display:block}
.obj.is-logo .brand,.obj.is-logo .prule{display:none}
.obj.rigid .box-logo{height:calc(var(--h) * .78)}

/* finishes */
.obj.foil .brand{color:transparent;background:linear-gradient(115deg,#9C7A2E 0%,#E8CF85 38%,#B8923C 55%,#F2DD9C 72%,#A07D2F 100%);-webkit-background-clip:text;background-clip:text}
.obj.foil .prule{background:linear-gradient(115deg,#9C7A2E,#F2DD9C,#A07D2F);opacity:1}
.obj.uv .art::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.24) 45%,transparent 60%);mix-blend-mode:screen}
.obj.uv .brand{text-shadow:1px 1px 0 rgba(255,255,255,.35)}

/* shape details */
.side-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:10px;letter-spacing:.2em;color:var(--print);opacity:.7;white-space:nowrap}
.crease{position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed rgba(0,0,0,.25);display:none}
.lid{position:absolute;left:0;right:0;top:0;height:30%;border-bottom:1px solid rgba(0,0,0,.28);display:none}
.obj.bag .crease{display:block}
.obj.bag .f-top{--shade:rgba(0,0,0,.45)}
.obj.rigid .lid{display:block}
.handle{position:absolute;left:0;top:0;width:90px;height:60px;margin-left:-45px;display:none}
.handle svg{width:100%;height:100%;display:block}
.obj.bag .handle{display:block}
.h-front{transform:translateY(calc(var(--h)/-2 - 58px)) translateZ(calc(var(--d)/2 - 6px))}
.h-back{transform:translateY(calc(var(--h)/-2 - 58px)) translateZ(calc(var(--d)/-2 + 6px))}

/* studio controls */
.controls{display:grid;grid-template-columns:1fr;align-content:start;gap:16px;padding:22px 22px 20px;background:#F8F5EF;border-radius:3px;box-shadow:0 0 0 1px rgba(80,60,30,.08),0 24px 40px -30px rgba(80,60,30,.38)}
.ctl{display:grid;gap:8px;min-width:0;border:0;margin:0;padding:0;align-content:start;align-self:start}
.ctl legend,.ctl .lbl{font-size:.88rem;font-weight:600;color:var(--carbon);padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:var(--r);border:1px solid rgba(80,60,30,.16);background:#FFFDF9;font-size:.95rem;cursor:pointer;transition:border-color .15s,background .15s}
.chip span:hover{border-color:rgba(80,60,30,.4)}
.chip input:checked + span{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.chip input:focus-visible + span{outline:3px solid var(--foil);outline-offset:2px}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.text-in{font:inherit;font-size:1rem;height:44px;padding:0 14px;border:1px solid rgba(80,60,30,.16);border-radius:var(--r);background:#FFFDF9;color:var(--ink);width:100%;align-self:start}
.text-in:focus{outline:2px solid var(--ink);outline-offset:0;background:#fff}
.ctl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;border-top:1px dashed rgba(80,60,30,.2);padding-top:18px}
.summary{font-size:.95rem;color:var(--ink-soft)}
.summary b{color:var(--ink)}
@media (max-width:720px){.bench{grid-template-columns:1fr}.stage{min-height:360px}}
@media (max-width:560px){.controls{padding:18px}.stage-cap{left:20px}.cmyk{right:20px}}

/* ---------- sections as stacked sheets: each one is its own paper, laid over the one above it ---------- */
main > section{position:relative}
main > section + section{box-shadow:0 -1px 0 rgba(27,43,75,.08),0 -22px 30px -26px rgba(40,30,20,.5)}

/* ---------- customers ---------- */
main > section.customers{box-shadow:none;background:#F4F5F3;border-block:1px solid var(--rule)}
.customers .wrap{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:center;text-align:center;padding-block:26px}
.customers p{color:var(--carbon);font-size:.98rem}
.cust-logo{height:56px;width:auto;max-width:100%;display:block}
.cust-logo.hira{height:52px}
.cust-logo.shagun{height:64px}

/* ---------- product range: kraft sheet ---------- */
.range{background:var(--kraft)}
.range-head{display:grid;gap:12px;margin-bottom:36px;max-width:640px}
.book{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
.sheet{background:var(--board);border-radius:var(--r);padding:20px;position:relative;box-shadow:0 1px 0 var(--kraft-deep),0 18px 30px -22px rgba(60,40,20,.55);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-width:0;scroll-margin-top:120px}
.sheet-tab{position:absolute;top:-30px;left:20px;background:var(--board);padding:7px 14px 8px;font-size:14px;font-weight:600;border-radius:var(--r) var(--r) 0 0;line-height:1.1}
.prod-photo{margin:0;border-radius:var(--r);overflow:hidden;align-self:center;max-width:100%}
.prod-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.sheet-body{display:grid;gap:14px;align-content:start;align-self:center;min-width:0}
.tagline{font-size:1.3rem;font-weight:600;font-variation-settings:"wdth" 88;line-height:1.15}
.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.95rem;border-top:1px solid var(--rule);padding-top:12px}
.spec dt{color:var(--carbon)}
.spec dd{margin:0}
.tabs{display:grid;gap:8px}
.tabs button{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:rgba(252,252,250,.5);padding:14px 16px;border:0;border-radius:var(--r);border-right:10px solid rgba(252,252,250,.85);transition:background .15s,border-color .15s}
.tabs button:hover{background:rgba(252,252,250,.85)}
.tabs button[aria-selected="true"]{background:var(--board);border-right-color:var(--ink)}
.tabs b{font-weight:600;font-size:1.05rem}
.tabs small{font-size:.88rem;color:var(--ink-soft);display:block;font-weight:400}
.tabs .gsm{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--ink-soft);text-align:right;white-space:nowrap}
@media (max-width:900px){.book{grid-template-columns:1fr}.sheet{margin-top:30px}}
@media (max-width:560px){.sheet{grid-template-columns:1fr}}

/* ---------- how an order works ---------- */
.steps{background:var(--ink);color:var(--board)}
.steps .wrap{display:grid;gap:40px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{display:grid;gap:10px;border-top:2px solid var(--foil);padding-top:18px;counter-increment:s;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-size:3rem;font-weight:700;line-height:1;font-variation-settings:"wdth" 75;color:var(--foil)}
.steps h3{color:var(--board)}
.steps p{color:#C9CFDB;max-width:32ch}
@media (max-width:760px){.steps ol{grid-template-columns:1fr}}

/* ---------- heritage: grey duplex board ---------- */
.heritage{background:#ECEDE9}
.heritage .wrap{display:grid;gap:36px}
.heritage .lede{max-width:46ch}
.line{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:28px}
.line::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:var(--ink)}
.line div{position:relative;display:grid;gap:4px;min-width:0}
.line div::before{content:"";position:absolute;top:-26px;left:0;width:14px;height:14px;background:#ECEDE9;border:2px solid var(--ink);border-radius:50%}
.line div:last-child{text-align:right}
.line div:last-child::before{left:auto;right:0;background:var(--ink)}
.yr{font-family:var(--display);font-weight:700;font-size:2.2rem;font-variation-settings:"wdth" 78;line-height:1}
.line small{color:var(--carbon);font-size:.95rem}

/* ---------- quote: kraft that fades into the footer's paper ---------- */
.quote{background:linear-gradient(180deg,var(--kraft) 0%,var(--kraft) calc(100% - 80px),#C6A074 calc(100% - 70px),#CDAB83 calc(100% - 60px),#D6B998 calc(100% - 50px),#E0CAB0 calc(100% - 40px),#EADCC9 calc(100% - 30px),#F3EADE calc(100% - 20px),#FAF5ED calc(100% - 10px),#FCF9F3 100%)}
.quote .wrap{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.quote-text{display:grid;gap:16px}
form.q{background:var(--board);padding:24px;border-radius:var(--r);display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:0 18px 30px -22px rgba(60,40,20,.55)}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.95rem;font-weight:600}
.field label span{font-weight:400;color:var(--carbon)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;min-height:48px;padding:0 12px;border:1px solid #B9B6AE;border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
.field textarea{padding:10px 12px;min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.err{grid-column:1/-1;color:#9B2C1F;font-size:.9rem;font-weight:600}
.err:empty{display:none}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.form-hint{font-size:.9rem;color:var(--carbon)}
.form-hint.full{grid-column:1/-1}
@media (max-width:860px){.quote .wrap{grid-template-columns:1fr}}
@media (max-width:520px){form.q{grid-template-columns:1fr;padding:18px}}

/* shared vertical rhythm for the content sections */
.range .wrap,.steps .wrap,.heritage .wrap,.quote .wrap{padding-block:clamp(60px,8vw,100px)}
.quote .wrap{padding-bottom:110px} /* the form ends above the fade, so it always sits on solid kraft */

/* ---------- footer: the kraft curl and SPI still life sit at the two ends ---------- */
footer{position:relative;color:var(--ink);background-color:#FCF9F3;
  background-image:url("../img/foot-left.webp"),url("../img/foot-right.webp");
  background-position:left center,right center;background-size:auto 100%,auto 100%;background-repeat:no-repeat}
footer p{color:#4F5562}
footer h3{color:var(--ink);font-size:1rem;font-variation-settings:"wdth" 95;margin-bottom:4px}
footer .foot{max-width:760px;display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:20px 48px;padding-block:32px;font-size:.95rem}
.foot .foot-brand{display:grid;justify-items:center;gap:8px;text-align:center}
.foot .foot-brand p{max-width:22ch;font-size:.88rem;line-height:1.4}
.foot .foot-logo{height:76px;width:auto;display:block;margin:0}
.foot > div:not(.foot-brand){min-height:5.6em;display:grid;align-content:start}
@media (max-width:1240px){footer{background-image:none}}
@media (max-width:700px){footer .foot{grid-template-columns:1fr 1fr;justify-items:start;gap:20px 28px;padding-block:28px 32px}.foot .foot-brand{grid-column:1/-1;justify-self:center}}
@media (max-width:420px){footer .foot{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- floating call + WhatsApp buttons ---------- */
.fab{position:fixed;z-index:30;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));display:grid;gap:14px}
.fab-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s}
.fab-btn svg{width:28px;height:28px;display:block}
.fab-call{background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 18px 4px rgba(255,255,255,.35),0 8px 18px -6px rgba(0,0,0,.45)}
.fab-call svg{width:26px;height:26px}
.fab-wa{background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.25),0 8px 18px -6px rgba(0,0,0,.4)}
.fab-btn:hover{transform:scale(1.07)}
.fab-btn:active{transform:scale(.97)}
.fab-btn:focus-visible{outline:3px solid var(--foil);outline-offset:3px}
@media (max-width:560px){.fab{gap:12px}.fab-btn{width:52px;height:52px}.fab-btn svg{width:25px;height:25px}}
/* keep the footer's last line clear of the buttons on small screens */
@media (max-width:700px){footer .foot{padding-bottom:150px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}