/* AALY Packaging v3 (2026-10-02). Re-measured off the ChatGPT comps (894px renders → 1440,
   ×1.61) after Kelvin: "still looks AI, don't be limited by the previous version".
   What changed from v2: photo-led heroes that bleed to the edge on the photo's own studio
   colour, a heavier type scale, darker body copy, shadowed cards instead of outlined ones,
   tighter section rhythm. Colours stay on the brand tokens. */
@font-face{font-family:'Avenir Light';src:url('/assets/fonts/Avenir-Light.woff2') format('woff2');font-weight:300;font-display:swap}
:root{
  --blue:#265189; --blue-deep:#1b3b66; --yellow:#ffb401; --yellow-d:#eba500;
  --cream:#faf3df; --cream-l:#fbf7ec; --sky:#ecf3fb; --sky-b:#d9e6f5;
  --paper:#fff; --ink:#1f2633; --text:#2e3543; --muted:#4f5867; --line:#e6dfcd; --grey:#f4f5f7;
  --display:'Outfit','Avenir Next',system-ui,sans-serif; --body:'Avenir Light','Nunito Sans','Avenir',system-ui,sans-serif;
  --ui:'Nunito Sans',system-ui,sans-serif;
  --wrap:1268px; --pad:clamp(20px,4vw,48px); --r:18px; --sec:clamp(52px,5.6vw,84px);
  --shadow:0 8px 28px rgba(22,44,82,.07),0 1px 3px rgba(22,44,82,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:300 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--display);color:var(--blue);margin:0}
h1{font-size:clamp(40px,5vw,72px);line-height:1.02;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(30px,3vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
h3{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
p{margin:0}
b,strong{font-family:var(--ui);font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sec) 0}
section.band{background:var(--cream-l)}
section.blue{background:var(--sky)}
.center{text-align:center;margin-top:30px}
.center-note{text-align:center;color:var(--muted);max-width:760px;margin:24px auto 0;font:400 16px/1.6 var(--ui)}
.ico{width:22px;height:22px;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 32px;border-radius:999px;
  font:800 18px/1 var(--ui);text-decoration:none;border:0;cursor:pointer;transition:background .15s}
.btn .ico{width:26px;height:26px}
.btn-y{background:var(--yellow);color:#16202e;box-shadow:0 6px 18px rgba(255,180,1,.28)}
.btn-y:hover{background:var(--yellow-d)}
.btn-b{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(38,81,137,.25)}
.btn-b:hover{background:var(--blue-deep)}
.btn.sm{min-height:46px;padding:0 22px;font-size:15px;box-shadow:none}
.btn.sm .ico{width:16px;height:16px}
.btn.lg{min-height:64px;padding:0 36px;font-size:19px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;background:var(--sky);
  color:var(--blue);font:800 14px/1 var(--ui);text-decoration:none;white-space:nowrap}
.pill .ico,.tlink .ico{width:16px;height:16px}
.tlink{display:inline-flex;align-items:center;gap:6px;font:800 16px var(--ui);text-decoration:none}

/* header */
.top{background:var(--blue);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:88px}
.brand img{height:60px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>a,.dd-b{color:#fff;text-decoration:none;font:700 16px/1 var(--ui);white-space:nowrap;padding:12px 13px;border-radius:999px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav>a:hover,.dd-b:hover{background:rgba(255,255,255,.1)}
.nav>a[aria-current]{box-shadow:inset 0 -2px 0 var(--yellow);border-radius:0}
.dd-b svg{width:12px;height:12px}
.nav .lang{border:1px solid rgba(255,255,255,.4);padding:10px 14px}
.nav .nav-wa{margin-left:10px;min-height:50px;padding:0 22px;font-size:16px;white-space:nowrap;color:#16202e;background:var(--yellow);box-shadow:none}
.nav .nav-wa .ico{width:22px;height:22px}
.nav .nav-wa:hover{background:var(--yellow-d)}
.dd{position:relative}
.dd-m{display:none;position:absolute;top:100%;left:0;background:#fff;border-radius:14px;padding:8px;min-width:260px;box-shadow:0 16px 40px rgba(22,44,82,.18)}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{display:block}
.dd-m a{display:block;padding:12px 14px;border-radius:10px;color:var(--blue);text-decoration:none;font:700 15px/1.2 var(--ui)}
.dd-m a:hover{background:var(--sky)}
.navtoggle{display:none;margin-left:auto;background:var(--blue-deep);color:#fff;border:0;border-radius:999px;padding:11px 20px;font:800 15px var(--ui)}

/* hero: the photo's own studio colour fills the section and the photo bleeds to the right
   edge, so copy and product read as one scene (the comps' look), not a picture in a box */
.hero2{background:var(--hbg,#f6f3ec);padding:0;overflow:hidden}
.hero2 .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;min-height:clamp(480px,40vw,600px)}
.h-copy{padding:clamp(40px,4.5vw,64px) 0}
.kick{color:var(--blue);font:800 15px/1 var(--ui);margin-bottom:18px;letter-spacing:.01em}
.h-copy .sub{font:500 clamp(20px,1.7vw,25px)/1.38 var(--display);color:var(--blue);margin-top:20px;letter-spacing:-.012em;max-width:600px}
.h-copy .body{margin-top:14px;color:var(--text);max-width:560px}
.pts{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.pts li{display:flex;align-items:center;gap:14px;font:800 17px var(--ui);color:var(--blue)}
.pts .ico{width:30px;height:30px}
.h-copy .btn{margin-top:30px}
.helper{color:var(--muted);font:400 15px var(--ui);margin-top:14px}
.h-art{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:calc(-1 * max(var(--pad), (100vw - var(--wrap)) / 2 + var(--pad)))}
.ph{border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph img{width:100%;height:auto}
.hero-ph{width:100%;border-radius:0;background:transparent!important}
.hero-ph img{width:100%;max-height:600px;object-fit:contain;object-position:right center;
  /* feather the photo's edges into the section so no rectangle shows */
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 58% 52%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 78% at 58% 52%,#000 62%,transparent 100%)}
.ph-empty{background:#efe8d8;color:#857c69;flex-direction:column;gap:12px;font:700 18px var(--ui);text-align:center;aspect-ratio:16/11}
.ph-empty .ico{width:64px;height:64px;stroke-width:1.1}
.ph-empty .cap{display:grid;margin-top:20px;color:var(--text);font:400 16px var(--ui)}
.ph-empty .cap span:first-child{font:700 22px var(--display);color:var(--blue)}
.h-art .ph-empty{width:calc(100% - max(var(--pad), (100vw - var(--wrap)) / 2 + var(--pad)));border-radius:var(--r);margin:40px 0;background:#e9e0cc;color:#7a715d;box-shadow:inset 0 0 0 1px #ddd2ba}
.float{position:absolute;left:0;bottom:36px;background:#fff;border-radius:16px;padding:18px 22px;display:flex;gap:14px;
  box-shadow:0 18px 40px rgba(22,44,82,.16);max-width:350px}
.float .ico{color:var(--yellow-d);width:28px;height:28px}
.float b{display:block;color:var(--blue);font-size:17px}
.float span{font:400 15px/1.5 var(--ui);color:var(--muted)}

/* section heads */
.shead{margin-bottom:clamp(26px,3vw,40px);max-width:820px}
.shead.center{text-align:center;margin-left:auto;margin-right:auto}
.lede{color:var(--muted);margin-top:12px;font:400 18px/1.55 var(--ui)}

/* features: big round icon bubbles */
.feats{display:grid;gap:clamp(18px,2.4vw,30px)}
.feats.c2{grid-template-columns:repeat(2,1fr)}
.feats.c3{grid-template-columns:repeat(3,1fr)}
.feats.c4{grid-template-columns:repeat(4,1fr)}
.feats.rows{grid-template-columns:1fr;gap:20px}
.feats.tight{margin-top:30px;gap:20px}
.feat{display:flex;flex-direction:column;gap:16px}
.feat.row{flex-direction:row;align-items:center;gap:18px}
.feat.card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.feats.c4 .feat.card{padding:24px}
.feat.card.row{align-items:flex-start}
.feat h3{font-size:19px}
.feat p{color:var(--muted);font:400 15.5px/1.5 var(--ui);margin-top:5px}
.bub{width:76px;height:76px;border-radius:50%;background:var(--sky);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.bub .ico{width:34px;height:34px;stroke-width:1.5}
.feat.row .bub{width:60px;height:60px}
.feat.row .bub .ico{width:28px;height:28px}
.blue .bub,.panel .bub{background:#fff}
.bub.sq{border-radius:14px;width:52px;height:52px}
.bub.sq .ico{width:26px;height:26px}

/* two columns: content left, tinted panel right */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.5vw,52px);align-items:start}
.duo.eq{grid-template-columns:1fr 1fr}
.duo.wide-l{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}
.duo h2{margin-bottom:6px}
.d-l>p{margin-top:14px}
.panel{background:var(--sky);border-radius:var(--r);padding:clamp(24px,2.8vw,38px)}
.panel.white{background:#fff;box-shadow:var(--shadow)}
.panel.cream{background:#fff;box-shadow:var(--shadow)}
.panel h2{font-size:clamp(25px,2.2vw,32px)}
.panel .feats,.panel .mini-steps{margin-top:22px}
.panel .btn{margin-top:24px}
.d-r{display:grid;gap:22px}
.mini-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mini-steps li{display:grid;gap:8px;font:400 14.5px/1.45 var(--ui);color:var(--muted)}
.mini-steps b{color:var(--blue);font-size:15.5px}

/* compare cards */
.ccards{display:grid;gap:26px}
.ccards.n2{grid-template-columns:1fr 1fr}
.ccards.n1{max-width:680px;margin:0 auto}
.ccard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ccard .ph{border-radius:0}
.cc-b{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px}
.cc-b p{color:var(--muted);font:400 15.5px var(--ui)}

/* published price */
.price2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.amount{font:800 clamp(42px,4.6vw,66px)/1 var(--display);color:var(--blue);letter-spacing:-.035em}
.speclist{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:18px}
.speclist li{display:flex;gap:16px;align-items:center;font:400 17px var(--ui);color:var(--text)}
.speclist .ico{color:var(--blue);width:26px;height:26px}
.price2 .btn{width:100%;justify-content:center;text-align:center;line-height:1.2}

/* specs + printing */
.tablewrap{margin-top:22px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.specs2{width:100%;border-collapse:collapse;font:400 16px var(--ui)}
.specs2 th,.specs2 td{text-align:left;padding:16px 20px;border-bottom:1px solid #eef0f3;vertical-align:top}
.specs2 tr:last-child th,.specs2 tr:last-child td{border-bottom:0}
.specs2 th{width:40%;background:#f7f8fa;font-weight:800;color:var(--ink)}
.pcards{margin-top:22px;display:grid;gap:16px}
.pcards.n3{grid-template-columns:repeat(3,1fr)}
.pcards.n4{grid-template-columns:repeat(2,1fr)}
.pcard{background:#fff;border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.pcard h3{margin-top:14px;font-size:17px}
.pcard p{font:400 14.5px/1.5 var(--ui);color:var(--muted);margin-top:5px}
.note{display:flex;gap:8px;align-items:center;color:var(--muted);font:400 15px var(--ui);margin-top:18px}
.note .ico{width:18px;height:18px}

/* client work: the bag fills the tile */
.cwrow{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:stretch}
.cws{display:grid;gap:12px}
.cws.n6{grid-template-columns:repeat(6,1fr)}
.cws.n3{grid-template-columns:repeat(3,1fr)}
.cw{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.cw img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e3e5ea}
.cw figcaption{padding:12px;font:800 15px var(--ui);color:var(--blue);text-align:center}
.statbox{background:var(--blue);color:#fff;border-radius:var(--r);padding:26px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center}
.statbox b{font:800 56px/1 var(--display);color:var(--yellow);letter-spacing:-.04em}
.statbox span{font:800 19px var(--ui)}
.statbox small{color:#cfdcec;font:400 14px var(--ui)}
.statbox .btn{margin:16px auto 0;white-space:nowrap}
.d-l .cws{margin-top:6px}

/* product cards */
.scards{display:grid;gap:22px}
.scards.n5{grid-template-columns:repeat(5,1fr)}
.scards.n3{grid-template-columns:repeat(3,1fr)}
.scards.n2{grid-template-columns:repeat(2,1fr);max-width:900px}
.scard{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.scard .ph{border-radius:0;aspect-ratio:4/3}
.scard .ph img{height:100%;object-fit:contain}
.scard .ph-empty{aspect-ratio:4/3}
.sc-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.sc-b h3{font-size:20px}
.sc-b p{color:var(--muted);font:400 15.5px/1.5 var(--ui)}
.sc-b>p:first-of-type::first-letter{text-transform:uppercase}
.sc-b .moq{color:var(--blue);font:800 15px var(--ui)}
.sc-b .btn{align-self:flex-start;margin-top:auto}
.sc-b .moq+.btn{margin-top:16px}
.scards.n5 h3{font-size:18px}
.scards.n5 .sc-b{padding:18px}

/* ordering steps */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.steps::before{content:"";position:absolute;top:38px;left:16%;right:16%;height:2px;background:var(--sky-b)}
.steps li{position:relative;background:#fff;border-radius:var(--r);padding:0 26px 28px;text-align:center;box-shadow:var(--shadow)}
.steps .bub{margin:-38px auto 14px;border:5px solid var(--cream-l)}
.steps small{color:var(--yellow-d);font:800 14px var(--ui)}
.steps h3{margin-top:4px}
.steps p{color:var(--muted);font:400 15.5px/1.5 var(--ui);margin-top:6px}

/* FAQ */
.qas{display:grid;gap:12px}
.qa{background:#fff;border-radius:14px;box-shadow:var(--shadow)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font:800 17px var(--ui);color:var(--blue)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{color:var(--blue);transition:transform .2s}
.qa[open] summary .ico{transform:rotate(45deg)}
.qa .ans{padding:0 24px 22px;font:400 16px/1.6 var(--ui);color:var(--text)}
.fgroup{background:#fff;border-radius:var(--r);margin-bottom:16px;box-shadow:var(--shadow)}
.fgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 26px}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup .num{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font:800 16px var(--ui)}
.fgroup .gt{font:800 22px var(--display);color:var(--blue);flex:1;letter-spacing:-.02em}
.fgroup>.qas{padding:0 26px 26px}
.fgroup .qa{box-shadow:none;background:#f7f8fa}
.fgroup[open]>summary>.ico{transform:rotate(45deg)}

/* happy clients */
.cgroups{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cgroup{background:var(--cream-l);border-radius:var(--r);padding:26px}
.cgroup h2{font-size:clamp(24px,2.1vw,30px);margin-bottom:18px}
.statcard{background:var(--sky);border-radius:var(--r);padding:clamp(30px,3.5vw,52px);text-align:center;width:calc(100% - max(var(--pad), (100vw - var(--wrap)) / 2 + var(--pad)));margin:40px 0}
.statcard b{display:block;font:800 clamp(72px,7.4vw,112px)/1 var(--display);color:var(--blue);letter-spacing:-.045em}
.statcard .l{display:block;font:800 clamp(24px,2.2vw,32px) var(--display);color:var(--blue);margin-top:10px;letter-spacing:-.02em}
.statcard .s{display:block;color:var(--muted);margin-top:4px;font:400 17px var(--ui)}
.statcard ul{list-style:none;padding:26px 0 0;margin:26px 0 0;border-top:1px solid var(--sky-b);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.statcard li{display:grid;justify-items:center;gap:10px;color:var(--text);font:400 16px var(--ui)}
.statcard li .ico{width:34px;height:34px;color:var(--blue)}
.logowall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.logowall li{flex:0 0 172px;height:104px;display:flex;align-items:center;justify-content:center;padding:16px;background:#fff;border-radius:14px;box-shadow:var(--shadow)}
.logowall img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* numbers */
.numbers{display:grid;grid-template-columns:.9fr 1.6fr;gap:44px;align-items:center}
.nums{display:grid;grid-template-columns:repeat(4,1fr)}
.num{padding:4px 22px;border-left:1px solid var(--sky-b)}
.num b{display:block;font:800 clamp(30px,2.8vw,44px)/1.05 var(--display);color:var(--blue);letter-spacing:-.03em}
.num span{display:block;margin-top:6px;font:700 16px var(--ui);color:var(--text)}
.num small{color:var(--muted);font:400 13.5px var(--ui)}

/* yellow CTA band */
.ctaband{background:var(--yellow);padding:clamp(38px,4vw,56px) 0}
.ctaband .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px}
.ctaband h2{color:var(--blue-deep)}
.ctaband p{color:#16202e;margin-top:10px;max-width:660px;font:400 18px/1.5 var(--ui)}
.cta-r{display:grid;justify-items:center;gap:10px;flex:none}
.cta-r small{font:400 14px var(--ui);color:#16202e}

/* contact form */
.qform{background:#fff;border-radius:var(--r);padding:clamp(24px,3vw,44px);box-shadow:var(--shadow)}
.qform fieldset{border:0;padding:0;margin:28px 0 0}
.qform legend{font:800 17px var(--ui);color:var(--blue);margin-bottom:12px}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.opt{position:relative;display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;background:#fff}
.opt input{margin-top:3px;accent-color:var(--blue)}
.opt b{display:block;font-size:16px;color:var(--ink)}
.opt small{color:var(--muted);font:400 13.5px var(--ui)}
.opt:has(input:checked){border-color:var(--blue);background:var(--sky)}
.in{width:100%;margin-top:10px;padding:14px 16px;border:1px solid #e3e6eb;border-radius:12px;background:var(--grey);font:400 16px var(--ui)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.two label{font:800 15px var(--ui);color:var(--ink)}
.qform>.btn{margin-top:28px}
.contact .d-r .panel h2{font-size:26px}

/* guide */
.guide-hero{--hbg:#f6f3ec}
.guide-hero .wrap{grid-template-columns:1fr;min-height:0}
.byline{margin-top:18px;color:var(--muted);font:400 16px var(--ui)}
.guide{display:grid;grid-template-columns:280px minmax(0,740px);gap:60px;justify-content:center}
.toc{position:sticky;top:112px;align-self:start;display:grid;gap:20px}
.toc-h{font:800 15px var(--ui);color:var(--blue)}
.toc ol{margin:0;padding-left:20px;display:grid;gap:9px;font:400 15px/1.4 var(--ui)}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--blue)}
.toc .panel{padding:20px;font:400 15px var(--ui)}
.toc .panel p{margin:4px 0 14px;color:var(--muted)}
.gsec{padding:0 0 40px;scroll-margin-top:110px}
.gsec h2{font-size:clamp(24px,2.1vw,30px);display:flex;gap:14px;align-items:baseline;margin-bottom:12px}
.gsec h2 span{color:var(--yellow-d);font-size:.8em}
.gsec p{margin-top:14px}
.asks{padding-left:22px;display:grid;gap:8px;margin-top:14px}

/* footer, same blue as the header so the official on-blue logo sits seamlessly */
footer.site{background:var(--blue);color:#dbe5f2;padding:60px 0 32px;font:400 15.5px/1.6 var(--ui)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer.site h3{color:#fff;font-size:17px;margin-bottom:14px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer.site a{color:#dbe5f2;text-decoration:none}
footer.site a:hover{color:#fff}
.f-brand img{height:52px;width:auto;margin-bottom:18px}
.f-cta{margin-top:30px}
.f-cta .btn{color:#16202e}
.legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:13.5px;color:#b9c8dc}
.stickywa{display:none}

@media(max-width:1360px){
  .nav>a,.dd-b{padding:12px 10px;font-size:15px}
  .nav .nav-wa span{display:none}
  .nav .nav-wa{padding:0 16px}
}
@media(max-width:1080px){
  .scards.n5{grid-template-columns:repeat(3,1fr)}
  .cws.n6{grid-template-columns:repeat(3,1fr)}
  .feats.c4{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .numbers{grid-template-columns:1fr}
  .opts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--blue);flex-direction:column;align-items:stretch;padding:12px var(--pad) 22px}
  .nav[data-open]{display:flex}
  .nav>a,.dd-b{padding:15px 8px;border-radius:8px;width:100%;justify-content:space-between}
  .nav>a[aria-current]{box-shadow:none;background:rgba(255,255,255,.1)}
  .dd-m{position:static;box-shadow:none;background:var(--blue-deep);min-width:0}
  .dd-m a{color:#fff}
  .nav .nav-wa{margin:12px 0 0;justify-content:center}
  .nav .nav-wa span{display:inline}
  .hero2 .wrap{grid-template-columns:1fr;min-height:0}
  .h-copy{padding-bottom:8px}
  .h-art{margin:0 calc(-1 * var(--pad))}
  .h-art .ph-empty,.statcard{width:auto;margin:0 var(--pad) 36px}
  .hero-ph img{object-position:center}
  .duo,.duo.eq,.duo.wide-l,.price2,.guide{grid-template-columns:1fr}
  .cwrow{grid-template-columns:1fr}
  .toc{position:static}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .float{left:var(--pad);bottom:20px}
}
@media(max-width:640px){
  body{font-size:17px}
  .top .wrap{min-height:72px}
  .brand img{height:42px}
  .feats.c2,.feats.c3,.feats.c4{grid-template-columns:1fr}
  .feat:not(.card){flex-direction:row;align-items:flex-start}
  .feat:not(.card) .bub{width:60px;height:60px}
  .scards.n5,.scards.n3,.scards.n2,.ccards.n2,.cgroups,.mini-steps,.steps,.pcards.n3,.pcards.n4{grid-template-columns:1fr}
  .steps::before{display:none}
  .steps li{padding-top:26px}.steps .bub{margin:0 auto 14px}
  .cws.n6,.cws.n3{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 12px;scrollbar-width:none}
  .cws::-webkit-scrollbar{display:none}
  .cw{scroll-snap-align:start}
  .ctaband .wrap{flex-direction:column;align-items:stretch;text-align:center}
  .ctaband .btn{justify-content:center;width:100%}
  /* full-width buttons: icon pinned left so the label itself is centred */
  .h-copy .btn,.ctaband .btn,.price2 .btn,.qform>.btn,.panel .btn,.center .btn{position:relative;width:100%;justify-content:center;padding:0 54px;text-align:center;line-height:1.2}
  .h-copy .btn .ico,.ctaband .btn .ico,.price2 .btn .ico,.qform>.btn .ico,.panel .btn .ico,.center .btn .ico{position:absolute;left:22px}
  .cc-b{flex-direction:column;align-items:flex-start}
  .opts{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .logowall li{flex:0 0 calc((100% - 28px) / 3);height:78px;padding:10px}
  .nums{grid-template-columns:1fr 1fr}
  .num{padding:4px 14px}
  footer.site .cols{grid-template-columns:1fr}
  .stickywa{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:30;min-height:56px;border-radius:999px;background:var(--yellow);
    color:#16202e;align-items:center;justify-content:center;gap:10px;font:800 16px var(--ui);text-decoration:none;
    box-shadow:0 12px 28px rgba(22,44,82,.24);transform:translateY(90px);transition:transform .25s}
  .stickywa .ico{position:absolute;left:22px}
  .stickywa.show{transform:none}
  footer.site{padding-bottom:100px}
  .float{position:relative;left:auto;bottom:auto;margin:0 var(--pad) 28px;max-width:none}
  .h-art{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* wide product shots are framed so the bags run off the bottom: stand them on the hero's
   bottom edge (the comps' look) and feather only the left and top edges into the studio */
.hero2.wide .h-art{align-items:flex-end}
.hero2.wide .hero-ph img{max-height:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 14%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 14%);
          mask-composite:intersect}
.hero2.wide .float{bottom:auto;top:40px}
@media(max-width:960px){.hero2.wide .float{top:auto}}
.hero-ph.ph-empty{background:#e9e0cc!important}
.num b{white-space:nowrap;font-size:clamp(26px,2.5vw,40px)}

/* home hero: three real client orders, staggered, the middle one raised */
.hero2.bags .h-art{margin-right:0;justify-content:center}
.hbags{display:flex;align-items:center;justify-content:center;width:100%;padding:40px 0 70px}
.hb{margin:0;width:38%;border-radius:20px;overflow:hidden;background:#dfe1e6;box-shadow:0 24px 50px rgba(22,44,82,.18)}
.hb img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hb0{transform:translateY(34px) rotate(-4deg);margin-right:-8%}
.hb1{width:44%;position:relative;z-index:2;transform:translateY(-14px)}
.hb2{transform:translateY(34px) rotate(4deg);margin-left:-8%}
.hero2.bags .float{top:auto;bottom:40px;left:-12px;z-index:3}

/* wide product shots: a little larger, left edge (background and cut-off bags) fades out */
.hero2.wide .hero-ph{overflow:hidden}
.hero2.wide .hero-ph img{width:124%;max-width:none;margin-left:-24%}
.hero2.wide .wrap{min-height:clamp(500px,38vw,640px)}

/* product cards: strips blend into their studio colour, and every card's MOQ and button
   line up at the bottom whatever the title length */
.scard .ph img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.scards.n5 h3,.scards.n3 h3{min-height:2.5em}
.sc-b>p:first-of-type{flex:1}
.sc-b .moq{margin-top:8px}
@media(max-width:960px){
  .hbags{padding:8px var(--pad) 48px}
  .hero2.bags .float{left:var(--pad);bottom:16px}
}
@media(max-width:640px){
  .scards.n5 h3,.scards.n3 h3{min-height:0}
  .hero2.bags .float{position:relative;left:auto;bottom:auto;margin:-24px var(--pad) 28px}
}

/* wide product heroes (reference: Kelvin 10-03): the photo is a backdrop over ~70% of the
   hero, full height, anchored bottom-right, faded out under the copy. No frame anywhere. */
@media(min-width:961px){
  .hero2.wide{position:relative}
  .hero2.wide .wrap{position:static;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .hero2.wide .h-copy{position:relative;z-index:2;max-width:min(600px,100%)}
  /* 10-05 Kelvin: bags bigger so the trade reads at a glance. The backdrop starts at 40%, under
     the end of the copy; the bags themselves sit right of the text, only studio sits under it */
  .hero2.wide .h-art{position:absolute;z-index:0;top:0;right:0;bottom:0;left:40%;width:auto;margin:0}
  .hero2.wide .hero-ph{height:100%;overflow:hidden;position:relative}
  /* the image keeps its own proportions and sits on the bottom edge, so the feather lands on
     the photo's own top and left edges, not on an invisible box around it */
  .hero2.wide .hero-ph img{position:absolute;right:0;bottom:0;width:100%;height:auto;max-height:100%;max-width:none;margin:0;object-fit:contain;object-position:right bottom;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade,7%)),linear-gradient(180deg,transparent 0,#000 30%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade,7%)),linear-gradient(180deg,transparent 0,#000 30%);
            mask-composite:intersect}
}

/* quote dialog (Ooi Dental booking pattern) */
.qd{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.qd[hidden]{display:none}
.qd-scrim{position:absolute;inset:0;background:rgba(17,28,46,.5);opacity:0;transition:opacity .2s}
.qd-panel{position:relative;background:#fff;border-radius:22px;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;
  padding:clamp(24px,3vw,36px);box-shadow:0 30px 70px rgba(17,28,46,.3);transform:translateY(12px);opacity:0;transition:transform .2s,opacity .2s}
.qd.is-open .qd-scrim{opacity:1}
.qd.is-open .qd-panel{transform:none;opacity:1}
.qd-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--grey);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.qd-x .ico{transform:rotate(45deg)}
.qd h2{font-size:clamp(26px,2.4vw,32px);padding-right:44px}
.qd-sub{color:var(--muted);font:400 16px/1.5 var(--ui);margin-top:6px}
.qd-step{font:800 15px var(--ui);color:var(--blue);margin:22px 0 10px}
.qd-chips{display:flex;flex-wrap:wrap;gap:8px}
.qd-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:700 15px var(--ui);color:var(--ink);cursor:pointer}
.qd-chip:hover{border-color:var(--blue)}
.qd-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.qd-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qd-fields label{font:700 14px var(--ui);color:var(--ink);display:grid;gap:6px}
.qd-fields input{padding:12px 14px;border:1px solid #e3e6eb;border-radius:12px;background:var(--grey);font:400 16px var(--ui)}
.qd-go{width:100%;justify-content:center;margin-top:24px;position:relative}
.qd-go .ico{position:absolute;left:22px}
.qd-note{text-align:center;color:var(--muted);font:400 14px var(--ui);margin-top:12px}
@media(max-width:640px){.qd{padding:0;align-items:flex-end}.qd-panel{border-radius:22px 22px 0 0;max-height:92vh}.qd-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.qd-scrim,.qd-panel{transition:none}}
.qd-file{display:flex;align-items:center;gap:12px;border:1.5px dashed #c9cfd8;border-radius:14px;padding:16px 18px;cursor:pointer;color:var(--muted);font:400 15px var(--ui);background:#fafbfc}
.qd-file:hover{border-color:var(--blue);color:var(--blue)}
.qd-file .ico{color:var(--blue);width:24px;height:24px}
.qd-file input{position:absolute;width:1px;height:1px;opacity:0}
.qd-file{position:relative}
.qd-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* first question: chat straight away, or open the form */
.qd-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qd-opt{display:flex;align-items:flex-start;gap:12px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--ink);text-decoration:none;font:400 15px/1.4 var(--ui)}
.qd-opt .ico{flex:none;width:26px;height:26px;color:var(--blue);margin-top:1px}
.qd-opt b{display:block;font:800 16px/1.3 var(--ui);margin-bottom:4px}
.qd-opt small{display:block;font-size:14px;color:var(--muted)}
.qd-opt:hover{border-color:var(--blue)}
.qd-opt.is-on{border-color:var(--blue);background:#eef3fa}
@media(max-width:640px){.qd-opts{grid-template-columns:1fr}}
.qd-err{margin-top:14px;color:#b42318;background:#fef3f2;border-radius:10px;padding:10px 14px;font:700 14px var(--ui)}
.qd-go[disabled]{opacity:.7;cursor:wait}
.qd-fields{grid-template-columns:1fr 1fr}
.hero2.plain .wrap{grid-template-columns:1fr;min-height:0}
.legal-body .gsec{max-width:780px}
.legal-body .gsec h2{font-size:clamp(22px,1.9vw,26px)}
.qd-legal{text-align:center;color:var(--muted);font:400 13.5px var(--ui);margin-top:8px}
.qd-legal a{color:var(--blue)}
.f-links{display:block;margin-bottom:8px}
.f-links a{color:#fff}