/* MDK Swiftlet 网站设计系统(多页共用)· 2026-08-04
   近白底 + 深炭情绪块 + 暖金 accent + Space Grotesk 数字 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
:root{
  --bg:#fbfaf8;--panel:#fff;--tint:#f1efe9;
  --ink:#1e1b17;--dim:#6d675e;--line:rgba(30,27,23,.1);
  --gold:#e8a33d;--gold-deep:#c9861f;--gold-ink:#231d13;
  /* 文字专用金(2026-08-12)。--gold-deep 当内文色只有 2.64:1,低于无障碍 AA 的 4.5:1。
     燕农多数用手机、常在户外看,这个是真会看不清楚的。
     --gold-deep 原样保留给渐层/边框/按钮(非文字,不受对比规范约束)。
     --gold-text 小字与连结用,最差 4.50:1;--gold-num 大字(>=24px)用,最差 3.41:1。 */
  --gold-text:#946317;--gold-num:#b0741b;
  --dark:#1e1b17;
  --r:18px;
  --shadow:0 1px 2px rgba(30,27,23,.04),0 12px 32px rgba(30,27,23,.08);
  --shadow-lg:0 2px 4px rgba(30,27,23,.05),0 24px 60px rgba(30,27,23,.14);
  /* 字级(2026-08-13 收敛)。原本 style.css 一份就有 21 种字号,
     12 到 17px 之间 0.5px 一跳 —— 那是长期堆积,不是设计:同一个层级的东西
     长得几乎一样,读者分不出主次,改版时也没人知道该照哪一个。
     收成 8 级文字 + 5 级展示。每一步的位移都 <=1px,所以视觉几乎不变,
     变的是往后「要用哪个字号」有唯一答案。
     ⚠️ 往后新增字号一律加 token,不要再写裸数字。 */
  --fs-2xs:12.5px;--fs-xs:13.5px;--fs-sm:14.5px;--fs-md:15.5px;
  --fs-lg:17px;--fs-xl:19px;--fs-2xl:21px;--fs-3xl:23px;
  --fs-h2:clamp(26px,3.4vw,38px);--fs-h1:clamp(34px,4.8vw,56px);
  --fs-hero:clamp(38px,5.6vw,66px);--fs-num:60px;--fs-num-xl:84px;
  --fs-h2-lg:clamp(32px,4.6vw,48px);          /* 页尾 CTA 的 h2,刻意比一般 h2 大 */
  --fs-stat:clamp(38px,4.6vw,60px);           /* .numrow 的大数字 */
  --fs-stat-sm:clamp(38px,4.2vw,54px);        /* .pcard 的大数字 */
  --fs-stat-words:clamp(23px,2.4vw,30px);     /* 数字位置放的是字不是数字时 */
  --fs-stat-fixed:38px;                       /* 「关于」页四格里的定值大数字 */
  --fs-hero-sub:clamp(17px,2vw,20px);         /* 首页 hero 的副标 */
  --fs-quote:clamp(22px,3vw,30px);            /* 情绪块的转折句、金句 */
  --fs-block-q:clamp(24px,3vw,32px);          /* 情绪块的提问句 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs-lg);line-height:1.9}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sg{font-family:"Space Grotesk","Noto Sans SC",sans-serif;font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:720px;margin:0 auto;padding:0 28px}
section{padding:96px 0}
h1{font-size:var(--fs-h1);font-weight:900;line-height:1.35}
h2{font-size:var(--fs-h2);font-weight:900;line-height:1.5}
h1 em,h2 em{font-style:normal;color:var(--gold-num)}
.kicker{color:var(--gold-text);font-weight:800;letter-spacing:.2em;font-size:var(--fs-xs);margin-bottom:18px}
.lead{color:var(--dim);font-size:var(--fs-xl);margin-top:14px;max-width:38em}
p.dim{color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:var(--gold-ink);font-weight:900;font-size:var(--fs-lg);padding:16px 32px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(201,134,31,.35);transition:transform .2s ease,filter .2s ease;cursor:pointer;border:none}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--panel);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.btn.onDark{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px rgba(0,0,0,.4)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.slot{border:1.5px dashed rgba(201,134,31,.5);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--dim);font-size:var(--fs-xs);padding:16px;line-height:1.7;background:var(--tint)}
html.js .rv{opacity:0;transform:translateY(24px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){ html.js .rv{opacity:1;transform:none} }

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(251,250,248,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .row{height:72px;display:flex;align-items:center;gap:26px;max-width:1120px;margin:0 auto;padding:0 28px}
nav .logo img{height:38px;width:auto}
nav .links{display:flex;gap:24px;font-size:var(--fs-md);font-weight:500;color:var(--dim);margin-left:auto}
/* body 的 line-height:1.9 是给中文正文的,套到导览上、词一换行两行就散得很开。
   马来文最明显(Hubungi Kami / Tentang Kami / Kaedah Diagnosis 都会断行)。
   创办人 2026-08-20 回报。桌机版收紧;手机版是一行一个连结,不受影响。 */
nav .links a{line-height:1.25}
nav .links a:hover{color:var(--ink)}
nav .links a.on{color:var(--ink);font-weight:800;border-bottom:2.5px solid var(--gold);padding-bottom:2px}
nav .btn{padding:11px 22px;font-size:var(--fs-sm)}
/* 手机汉堡按钮(桌面隐藏) */
.burger{display:none;width:44px;height:44px;padding:12px 10px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger i{display:block;width:100%;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
nav.open .burger i:nth-child(1){transform:translateY(8.75px) rotate(45deg)}
nav.open .burger i:nth-child(2){opacity:0}
nav.open .burger i:nth-child(3){transform:translateY(-8.75px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){ .burger i{transition:none} }

/* page hero(内页页首) */
.phero{padding:84px 0 56px}
.phero .sub{margin-top:16px;color:var(--dim);font-size:var(--fs-xl);max-width:36em}
.phero .sub b{color:var(--ink)}

/* 深炭情绪块 */
.dark-block{background:var(--dark);color:#efe9df;padding:120px 0}
.dark-block h2,.dark-block .q{color:#fff}
.dark-block p{color:rgba(239,233,223,.72)}
.hl{text-decoration:none;background:linear-gradient(transparent 68%,rgba(232,163,61,.45) 0)}

/* 通用网格 */
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:var(--fs-sm);color:var(--dim)}

/* 方法大卡 */
.mcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 40px 36px 150px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* 第一张卡的金顶条:用 inset 阴影不用 border-top。
   border-top:4px 配 18px 圆角,两个上角会跟其余三边的 1px 灰边斜接成楔形;
   而且 4px vs 1px 会让这张卡比旁边三张高 3px。inset 阴影沿着圆角走,两个问题都没有。 */
.mcard.first{box-shadow:inset 0 4px 0 var(--gold),var(--shadow)}
.mcard.first:hover{box-shadow:inset 0 4px 0 var(--gold),var(--shadow-lg)}
.mcard .big{position:absolute;left:26px;top:50%;transform:translateY(-50%);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:var(--fs-num-xl);line-height:1;color:rgba(201,134,31,.16)}
.mcard h3{font-size:var(--fs-2xl);font-weight:900;margin-bottom:8px}
.mcard p{color:var(--dim);font-size:var(--fs-md);max-width:46em}
.mcards{display:grid;gap:20px}
.callout{background:linear-gradient(120deg,rgba(232,163,61,.14),rgba(232,163,61,.05));border:1px solid rgba(201,134,31,.3);border-radius:var(--r);padding:30px 36px;font-weight:800;font-size:var(--fs-xl);line-height:2}

/* 数字见证卡 */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 34px}
.pcard .num{font-family:"Space Grotesk","Noto Sans SC",sans-serif;font-weight:700;font-size:var(--fs-stat-sm);line-height:1.15;color:var(--gold-num)}
.pcard .num small{font-size:var(--fs-2xl);font-weight:900;color:var(--ink)}
.pcard p{color:var(--dim);margin-top:14px;font-size:var(--fs-md)}

/* 产品卡 */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:32px;display:flex;flex-direction:column;gap:13px;transition:transform .2s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* ⚠️ 产品图一律 contain + 自然比例,绝不 cover。
   cover 会把产品切头切脚(2026-08-05 出过两次:PA1100 被裁成直的、Meranti+ 瓶身断头断脚)。
   要固定比例的场景照请自己在该处写 inline,不要改这条通则。 */
.tile img{border-radius:12px;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#fff}
.tile .use{color:var(--gold-text);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em}
.tile h3{font-size:var(--fs-2xl);font-weight:900}
.tile p{color:var(--dim);font-size:var(--fs-md)}
.tile .go{font-weight:900;font-size:var(--fs-md);border-bottom:2.5px solid var(--gold);align-self:flex-start;padding-bottom:1px}
.tile ul{list-style:none;color:var(--dim);font-size:var(--fs-md);display:grid;gap:6px}
.tile ul li::before{content:"·";color:var(--gold-text);font-weight:900;margin-right:8px}

/* 文字为主 + 侧边产品图。刻意和上面两张 .ptile 的图文分栏不同构,免得三段一样 */
.tile-side{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center}
.tile-side > img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;background:none}

/* 产品详卡:图文分栏(手机整个塌成一栏) */
.ptile{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
.tile ul.two{grid-template-columns:1fr 1fr;gap:8px 34px}

/* 产品三件不等分(上面一张满幅图文卡 + 下面两张),避免三等分卡的模板节奏。
   不用「左大跨两行」是因为那会逼着大卡的图裁成直的,PA1100 是横幅机器,一裁就断头断尾。 */
.prodtri{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prodtri > :first-child{grid-column:1 / -1}

/* 成绩编辑式列表(大数字 + 展开的故事,和首页的预告卡区分开) */
.numrow > div{display:grid;grid-template-columns:minmax(160px,.4fr) 1fr;gap:36px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.numrow > div:last-child{border-bottom:1px solid var(--line)}
.numrow .n{font-family:"Space Grotesk","Noto Sans SC",sans-serif;font-weight:700;font-size:var(--fs-stat);line-height:1.1;color:var(--gold-num)}
.numrow .n small{font-size:var(--fs-2xl);font-weight:900;color:var(--ink);margin-left:5px}
.numrow .n.words{font-size:var(--fs-stat-words);font-weight:900;line-height:1.45;color:var(--ink)}
.numrow h3{font-size:var(--fs-xl);font-weight:900;margin-bottom:9px}
.numrow p{color:var(--dim);font-size:var(--fs-lg)}

/* FB 留言:整页截图切成一条一条,每条独立一张卡。
   图档是 2x LANCZOS 预放大的,所以显示到 800px 还撑得住(浏览器自己拉伸会更糊) */
.fbstack{display:grid;gap:20px;max-width:800px;margin:40px auto 0}
/* 截图本身是白/浅灰底,页面也是近白底,单靠细线框会糊在一起。
   解法是给每张加一圈**水泥灰卡纸边**(就是全站的 --tint),不是黑框:
   黑色全站没有,六张连排会变成一道黑梯子,还跟暖金抢眼。
   padding + box-sizing 做出卡纸效果,不用改 HTML */
.fbstack img{width:100%;height:auto;box-sizing:border-box;padding:10px;
  background:var(--tint);border-radius:14px;
  border:1px solid rgba(30,27,23,.16);box-shadow:var(--shadow-lg)}

/* 照片拼贴(一大两小)。行高由容器比例定死,不靠图片互相撑,避免溢出 */
.collage{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:18px;aspect-ratio:16/9}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.collage > :first-child{grid-row:span 2}

/* 背书条 */
.press{padding:48px 0;border-top:1px solid var(--line);background:var(--panel)}
.press .row{display:flex;gap:34px;align-items:center;flex-wrap:wrap;justify-content:center}
.press .label{font-size:var(--fs-xs);letter-spacing:.18em;font-weight:800;color:var(--dim)}
/* 背书标志用原色:这一排是信任证据不是花边,而且手机没有 hover,灰阶版在手机上永远回不了色 */
.press img{height:40px;width:auto;opacity:.9;transition:opacity .2s ease}
.press img:hover{opacity:1}

/* 表单 */
.form{display:grid;gap:18px;max-width:560px}
.form label{font-weight:700;font-size:var(--fs-md);display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:var(--panel);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2.5px solid var(--gold);outline-offset:1px;border-color:transparent}
.form .hint{font-size:var(--fs-xs);color:var(--dim);margin-top:5px}

/* 深色收尾 CTA */
.final{background:var(--dark);color:#efe9df;text-align:center;padding:120px 0}
.final h2{font-size:var(--fs-h2-lg);color:#fff}
.final p{margin:22px auto 38px;max-width:28em;color:rgba(239,233,223,.72);font-size:var(--fs-xl)}
.final p b{color:#fff}
.final .filter{margin-top:30px;font-size:var(--fs-xs);color:rgba(239,233,223,.45)}
/* 浅色收尾(资料型内页用,让九页收尾不是同一张脸) */
.final.light{background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding:100px 0}
.final.light h2{color:var(--ink)}
.final.light p{color:var(--dim)}
.final.light p b{color:var(--ink)}
.final.light .filter{color:var(--dim)}

footer{background:var(--dark);color:rgba(239,233,223,.55);border-top:1px solid rgba(239,233,223,.12);padding:40px 0;font-size:var(--fs-sm)}
footer .row{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;max-width:1120px;margin:0 auto;padding:0 28px}
footer .row a:hover{color:#fff}
footer .warranty-link{max-width:1120px;margin-left:auto;margin-right:auto;padding:0 28px}
footer .warranty-link a{display:inline-block;font-size:var(--fs-md);line-height:1.4;padding:11px 22px;border:1px solid rgba(232,163,61,.55);border-radius:999px;color:var(--gold);border-bottom-width:1px}
footer .warranty-link a:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* WordPress 的后台管理列是 position:fixed 压在最上面,只有登入的人看得到。
   我们的 nav 是 sticky top:0,固定时会被它盖掉一半(创办人 2026-08-20 回报)。
   WordPress 给登入者的 body 加 .admin-bar,就靠这个把 nav 往下推。
   32px 是桌机的管理列高度,782px 以下变成 46px,这两个数字是 WordPress 定的。 */
body.admin-bar nav{top:32px}
@media screen and (max-width:782px){body.admin-bar nav{top:46px}}

/* ── motion pack v2(科技感动效,全部 transform/opacity,零库)── */

/* 按钮流光 */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:shine .7s ease}
@keyframes shine{from{left:-70%}to{left:130%}}

/* 导航下划线滑入 */
nav .links a{position:relative;padding-bottom:4px}
nav .links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav .links a:hover::after,nav .links a.on::after{transform:scaleX(1)}
nav .links a.on{border-bottom:none}

/* 声波律动(水晶声 cue) */
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px;margin-right:9px}
.eq i{width:3px;height:16px;background:var(--gold);border-radius:2px;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:0s}
.eq i:nth-child(2){animation-delay:.18s}
.eq i:nth-child(3){animation-delay:.36s}
.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* 背书 logo 跑马灯(hover 暂停) */
.marq{overflow:hidden;position:relative}
.marq .track{--marq-half-gap:32px;display:flex;gap:64px;align-items:center;width:max-content;animation:marq 36s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - var(--marq-half-gap)))}}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--panel),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--panel),transparent)}

/* 照片跑马灯(课堂现场用。track 由 reveal.js 复制一份做无缝循环) */
.photo-marq .track{--marq-half-gap:9px;gap:18px;animation-duration:52s}
.photo-marq img{height:270px;width:auto;flex:none;border-radius:14px;box-shadow:var(--shadow);object-fit:cover}
.marq.on-bg::before{background:linear-gradient(90deg,var(--bg),transparent)}
.marq.on-bg::after{background:linear-gradient(270deg,var(--bg),transparent)}
@media(max-width:840px){ .photo-marq img{height:180px} }
/* 关掉动效的人:改成可以自己横向拨,不要变成只看得到前两张 */
@media (prefers-reduced-motion: reduce){
  .photo-marq{overflow-x:auto}
  .photo-marq::before,.photo-marq::after{display:none}
}

/* 诊断扫描光(卡片进场时扫一遍) */
.scan{position:relative;overflow:hidden}
html.js .scan::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 32%,rgba(232,163,61,.22) 50%,transparent 68%);transform:translateX(-101%);pointer-events:none}
html.js .scan.in::before{animation:scanmove 1.1s ease .25s both}
@keyframes scanmove{to{transform:translateX(101%)}}

/* 数字滚动由 motion.js 的 [data-cu] 驱动;等宽避免跳动 */
[data-cu]{font-variant-numeric:tabular-nums}

/* 图片进场轻微放大回落 */
html.js .rv img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
html.js .rv:not(.in) img{transform:scale(1.03)}
html.js .steps-teaser .s.rv.in{transition-duration:.48s}

/* Homepage contact control: waits until the opening screen is past, then yields to the final CTA. */
.wa-float{position:fixed;right:24px;bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));z-index:19;display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 48px);padding:13px 17px;background:var(--dark);color:#fff;border:1px solid rgba(255,255,255,.32);border-radius:999px;box-shadow:0 12px 28px rgba(17,16,14,.24);font-size:var(--fs-sm);font-weight:800;line-height:1.2;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .24s ease,transform .24s cubic-bezier(.16,1,.3,1)}
.wa-float.is-visible{opacity:1;pointer-events:auto;transform:none}
.wa-float.is-covered{opacity:0;pointer-events:none;transform:translateY(8px)}
.wa-float-mark{position:relative;display:block;width:16px;height:13px;flex:none;border:2px solid currentColor;border-radius:50%}
.wa-float-mark::after{content:"";position:absolute;left:1px;bottom:-5px;width:5px;height:5px;border-left:2px solid currentColor;transform:rotate(-28deg)}
.wa-float:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .eq i,.marq .track{animation:none}
  .btn:hover::after{animation:none}
  html.js .scan::before{display:none}
  html.js .rv img{transition:none;transform:none}
  .wa-float{transition:none;transform:none}
}

@media(max-width:840px){
  section{padding:64px 0}
  .grid2,.grid3{grid-template-columns:1fr;gap:34px}
  .mcard{padding:92px 26px 30px 26px}
  .wa-float{right:16px;bottom:max(16px,calc(12px + env(safe-area-inset-bottom)));max-width:calc(100vw - 32px);padding:12px 15px;font-size:var(--fs-xs)}
  .mcard .big{left:24px;top:24px;transform:none;font-size:var(--fs-num)}

  /* 手机导航:汉堡 + 下拉整页选单(桌面那排链接在这里变成抽屉) */
  .burger{display:flex;margin-left:auto}
  nav .row{gap:14px}
  nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    max-height:78vh;overflow-y:auto;margin-left:0}
  nav.open .links{display:flex}
  nav .links a{display:block;padding:15px 28px;font-size:var(--fs-lg);font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:15px}
  nav .links a:last-child{border-bottom:none}
  nav .links a::after{display:none}
  nav .links a.on{color:var(--gold-text)}
  nav .btn{padding:10px 15px;font-size:var(--fs-xs)}

  .ptile{grid-template-columns:1fr;gap:22px}
  .tile-side{grid-template-columns:1fr;gap:24px}
  .tile-side > img{max-width:280px;justify-self:center}
  .tile ul.two{grid-template-columns:1fr}
  .prodtri{grid-template-columns:1fr}
  .prodtri > :first-child{grid-column:auto}
  .numrow > div{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .collage{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}
  .collage > :first-child{grid-row:auto}
  .collage img{aspect-ratio:4/3;height:auto}
}