/* ============================================================
   Hong Kong Assignment Help — "Harbour" design system
   Elegant + playful · warm ivory · jade primary
   · bauhinia cerise + tangerine pops · sticker badges
   Fonts: Nunito (display+body) + Inter (fine UI)  — per spec
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand — Harbour palette */
  --jade-900: #073B31;
  --jade-800: #0A4C3F;
  --jade:     #0C5C4E;   /* primary deep */
  --jade-600: #0E7361;
  --jade-300: #6FB8A8;
  --jade-soft:#DCEDE6;
  --jade-tint:#E7F2EC;

  --cerise:    #E1466A;  /* bauhinia pop */
  --cerise-600:#C7335A;
  --cerise-soft:#FCE7EC;

  --tangerine: #F2962F;  /* warm playful */
  --tangerine-soft:#FCEEDD;

  --butter:   #FFD24A;   /* highlight underlay */
  --butter-soft:#FFF2C9;

  --ocean:    #2A7DA3;   /* occasional cool accent */
  --ocean-soft:#E4F0F6;

  /* Ink neutrals (warm) */
  --ink-900:#1C1714;
  --ink-800:#2A2420;
  --ink-700:#403933;
  --ink-600:#5B524A;
  --ink-500:#7C7268;
  --ink-400:#A79D92;
  --ink-300:#CFC7BC;
  --ink-200:#E7E0D5;
  --ink-100:#F1ECE3;

  --paper:    #EEF5F1;   /* jade-tinted page (matches logo) */
  --paper-2:  #E1EEE8;   /* deeper jade soft section */
  --surface:  #FFFFFF;

  --success:#1F9D6B; --success-soft:#E5F5EE;

  /* Type */
  --font-display:'Nunito', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --font-ui:'Inter', system-ui, sans-serif;

  /* Radii — chunky, playful squircles */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-2xl:44px; --r-pill:999px;

  /* Shadows — warm jade-tinted */
  --sh-xs:0 1px 2px rgba(28,23,20,.06);
  --sh-sm:0 3px 10px rgba(28,23,20,.07);
  --sh-md:0 12px 30px rgba(12,92,78,.12);
  --sh-lg:0 24px 60px rgba(12,92,78,.16);
  --sh-pop:0 10px 0 rgba(7,59,49,.12);     /* playful "hard" drop */
  --sh-cta:0 12px 28px rgba(225,70,106,.4);

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-body);
  background:var(--paper); color:var(--ink-800);
  font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5 { font-family:var(--font-display); color:var(--ink-900); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; margin:0 0 .5em; }
h1 { font-weight:900; }
h2 { font-weight:900; }
h3 { font-weight:800; }
p { text-wrap:pretty; margin:0 0 1em; }
a { color:var(--jade-600); text-decoration:none; }
img,svg { max-width:100%; }
img { height:auto; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px; }
.wrap-narrow { width:100%; max-width:820px; margin-inline:auto; padding-inline:24px; }
.section { padding-block:92px; }
.section-sm { padding-block:60px; }
@media (max-width:760px){ .section{ padding-block:60px; } }

.bg-paper{ background:var(--paper);} .bg-soft{ background:var(--paper-2);} .bg-white{ background:var(--surface);}
.bg-jade{ background:var(--jade); color:#EAF3EF; }
.bg-jade h1,.bg-jade h2,.bg-jade h3,.bg-jade h4{ color:#fff; }
.bg-jade-tint{ background:var(--jade-tint); }

/* ---------- Eyebrow pill (animated shimmer + twinkle icon) ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jade); padding:7px 15px 7px 13px; border-radius:var(--r-pill); margin:0 0 18px;
  background:linear-gradient(100deg,var(--jade-soft) 0%, #F4FBF8 38%, var(--ocean-soft) 100%);
  background-size:200% 100%; animation:ebShimmer 4.5s var(--ease) infinite;
  border:1px solid rgba(14,115,97,.14);
}
.eyebrow svg{ width:14px; height:14px; animation:ebTwinkle 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes ebShimmer{ 0%{ background-position:120% 0;} 60%{ background-position:-20% 0;} 100%{ background-position:-20% 0;} }
@keyframes ebTwinkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:1;} 45%{ transform:scale(1.18) rotate(8deg); opacity:.82;} }
@media (prefers-reduced-motion: reduce){ .eyebrow{ animation:none; } .eyebrow svg{ animation:none; } }
.bg-jade .eyebrow{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.18); }
.eyebrow.cerise{ color:var(--cerise-600); background:linear-gradient(100deg,var(--cerise-soft) 0%, #FFF1F4 38%, var(--tangerine-soft) 100%); background-size:200% 100%; border-color:rgba(199,51,90,.16); }
.eyebrow.tang{ color:#B36A12; background:linear-gradient(100deg,var(--tangerine-soft) 0%, #FFF7EC 38%, var(--butter-soft) 100%); background-size:200% 100%; border-color:rgba(179,106,18,.16); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:16px;
  padding:15px 28px; border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; line-height:1; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .16s var(--ease); }
.btn:hover svg:last-child{ transform:translateX(3px); }
.btn-primary{ background:linear-gradient(120deg,var(--cerise),var(--tangerine)); color:#fff; box-shadow:var(--sh-cta); position:relative; overflow:hidden; }
.btn-primary:hover{ transform:translateY(-2px); background:linear-gradient(120deg,var(--cerise-600),#E07F1E); }
.btn-primary:active{ transform:translateY(1px) scale(.99); }
/* Universal animated sheen on filled buttons */
.btn-primary::after,.btn-grad::after,.btn-jade::after{ content:""; position:absolute; top:0; left:-85%; width:48%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-20deg); animation:btnSheen 3.8s ease-in-out infinite; pointer-events:none; }
@keyframes btnSheen{ 0%{ left:-85%; } 55%,100%{ left:150%; } }
@media (prefers-reduced-motion: reduce){ .btn-primary::after,.btn-grad::after,.btn-jade::after{ animation:none; } }
.btn-grad{ background:linear-gradient(120deg,var(--cerise),var(--tangerine)); color:#fff; box-shadow:var(--sh-cta); border-color:transparent; position:relative; overflow:hidden; }
.btn-grad:hover{ transform:translateY(-2px); background:linear-gradient(120deg,var(--cerise-600),#E07F1E); }
.btn-grad:active{ transform:translateY(1px) scale(.99); }
/* Pulsing CTA (animation works on mobile — independent of viewport) */
.btn-pulse{ animation:btnPulse 2.4s var(--ease) infinite; }
@keyframes btnPulse{ 0%,100%{ box-shadow:0 8px 22px rgba(225,70,106,.40); } 50%{ box-shadow:0 10px 32px rgba(225,70,106,.70); } }
@media (prefers-reduced-motion: reduce){ .btn-pulse{ animation:none; } }

/* Animated gradient CTA strip (high contrast on any section bg) */
.cta-strip{ margin-top:24px; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--jade),var(--jade-800)); color:#fff; border:none; border-radius:var(--r-lg);
  padding:28px 32px; position:relative; overflow:hidden; box-shadow:var(--sh-md); }
.cta-strip h3{ color:#fff; } .cta-strip p{ color:#CFE5DD; margin:0; }
.cta-strip > *{ position:relative; z-index:1; }
.cta-strip::before{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-18deg); animation:ctaSheen 5s ease-in-out infinite; }
@keyframes ctaSheen{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){ .cta-strip::before{ animation:none; } }
.btn-jade{ background:linear-gradient(120deg,var(--jade),var(--jade-600)); color:#fff; position:relative; overflow:hidden; }
.btn-jade:hover{ transform:translateY(-2px); background:linear-gradient(120deg,var(--jade-800),var(--jade)); }
.btn-ghost{ background:transparent; color:var(--jade); border-color:var(--ink-200); }
.btn-ghost:hover{ border-color:var(--jade); transform:translateY(-1px); }
.bg-jade .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.bg-jade .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-lg{ padding:18px 34px; font-size:17px; }
.btn-block{ width:100%; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:13.5px; font-weight:600; color:var(--ink-700); background:#fff; border:1.5px solid var(--ink-200); padding:8px 15px; border-radius:var(--r-pill); }
.chip svg{ width:15px; height:15px; color:var(--jade-600); }

/* ---------- Sticker badge (playful, rotated) ---------- */
.sticker{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:800; font-size:13px;
  background:var(--butter); color:var(--ink-900); padding:8px 14px; border-radius:var(--r-pill);
  box-shadow:var(--sh-pop); transform:rotate(-3deg);
}
.sticker.cerise{ background:var(--cerise); color:#fff; }
.sticker.jade{ background:var(--jade); color:#fff; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1.5px solid var(--ink-100); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }

/* Blob icon (playful colored squircle) */
.blob{ width:58px; height:58px; border-radius:40% 60% 62% 38% / 46% 42% 58% 54%; display:grid; place-items:center; flex:none; margin-bottom:18px; }
.blob svg{ width:28px; height:28px; }
.blob.jade{ background:var(--jade-soft); color:var(--jade); }
.blob.cerise{ background:var(--cerise-soft); color:var(--cerise-600); }
.blob.tang{ background:var(--tangerine-soft); color:#B36A12; }
.blob.ocean{ background:var(--ocean-soft); color:var(--ocean); }
.blob.butter{ background:var(--butter-soft); color:#9A7A12; }

/* Service cards — distinctive: solid icon tile, watermark numeral, growing accent bar */
.svc-card{ position:relative; background:#fff; border:1.5px solid var(--ink-100); border-radius:var(--r-xl); padding:30px 26px 26px; overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:color-mix(in srgb, var(--acc) 32%, var(--ink-100)); }
.svc-num{ position:absolute; top:6px; right:18px; font-family:var(--font-display); font-weight:900; font-size:62px; line-height:1; color:var(--acc); opacity:.10; pointer-events:none; }
.svc-ic{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; margin-bottom:18px; background:var(--acc); color:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--acc) 38%, transparent); transition:transform .25s var(--spring); }
.svc-ic svg{ width:28px; height:28px; }
.svc-card:hover .svc-ic{ transform:rotate(-6deg) scale(1.06); }
.svc-bar{ display:block; height:4px; width:40px; border-radius:4px; background:var(--acc); margin-top:18px; transition:width .3s var(--ease); }
.svc-card:hover .svc-bar{ width:90px; }

/* ---------- Grids ---------- */
.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(2,1fr);} .g-3{ grid-template-columns:repeat(3,1fr);} .g-4{ grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr;} }

/* ---------- Section heading block ---------- */
.sec-head{ max-width:780px; margin-bottom:48px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(28px,3.6vw,44px); }
.sec-head p{ font-size:18px; color:var(--ink-600); margin-top:6px; }

/* Hand-drawn underline highlight */
.mark{ background:linear-gradient(transparent 60%, var(--butter) 60%); padding:0 .06em; }
.mark-cerise{ background:linear-gradient(transparent 60%, var(--cerise-soft) 60%); }
/* HK signature: gradient keyword + wavy hand-drawn underline */
.mark-hk{ position:relative; white-space:nowrap; background:linear-gradient(120deg,var(--cerise),var(--tangerine)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; }
.mark-hk::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.02em; height:.11em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M1 6 Q 11 1 22 6 T 43 6' stroke='%23F2962F' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x; background-size:auto 100%; }

/* ---------- Stars ---------- */
.stars{ color:var(--tangerine); letter-spacing:1px; font-size:15px; }

/* ---------- Accordion ---------- */
.acc-item{ background:#fff; border:1.5px solid var(--ink-100); border-radius:var(--r-md); margin-bottom:14px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.acc-item.open{ border-color:var(--jade-300); box-shadow:var(--sh-sm); }
.acc-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--font-display); font-weight:800; font-size:17.5px; color:var(--ink-900); padding:22px 56px 22px 24px; position:relative; display:block; }
.acc-q::after{ content:""; position:absolute; right:20px; top:24px; width:26px; height:26px; border-radius:50%; background:var(--jade-soft); }
.acc-q::before{ content:""; position:absolute; right:28px; top:31px; width:10px; height:2px; background:var(--jade); border-radius:2px; z-index:1; transition:transform .3s var(--ease); }
.acc-q .v{ content:""; position:absolute; right:32px; top:27px; width:2px; height:10px; background:var(--jade); border-radius:2px; z-index:1; transition:opacity .3s; }
.acc-item.open .acc-q .v{ opacity:0; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc-a-inner{ padding:0 24px 24px; color:var(--ink-600); font-size:16px; }

/* ---------- Nav ---------- */
.nav-shell{ position:sticky; top:14px; z-index:50; }
.nav{ display:flex; align-items:center; gap:22px; background:linear-gradient(105deg,rgba(255,255,255,.92) 0%, rgba(220,237,230,.86) 100%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1.5px solid var(--ink-100); border-radius:var(--r-pill); box-shadow:var(--sh-sm); padding:11px 16px 11px 20px; }
.nav-links{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.nav-links a{ font-family:var(--font-ui); font-size:14.5px; font-weight:600; color:var(--ink-700); padding:9px 13px; border-radius:var(--r-pill); transition:background .14s,color .14s; }
.nav-links a:hover,.nav-links a.active{ background:var(--jade-soft); color:var(--jade); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:8px; color:var(--jade); }
.nav-burger svg{ width:26px; height:26px; }
.mobile-menu{ display:none; }
@media (max-width:980px){
  .nav-links,.nav-cta .btn span.hide-sm{ display:none; }
  .nav-burger{ display:block; }
  .mobile-menu.open{ display:block; }
  .mobile-menu{ margin-top:10px; background:#fff; border:1.5px solid var(--ink-100); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:12px; }
  .mobile-menu a{ display:block; padding:13px 14px; border-radius:var(--r-sm); font-weight:800; color:var(--jade); font-family:var(--font-display); }
  .mobile-menu a:hover{ background:var(--jade-soft); }
}

/* ---------- Top marquee bar ---------- */
.topbar{ background:var(--jade-900); color:#DDEDE7; font-family:var(--font-ui); font-size:13.5px; font-weight:500; overflow:hidden; }
.topbar .wrap{ display:flex; align-items:center; gap:10px; padding-block:9px; }
.topbar .pulse{ width:9px; height:9px; border-radius:50%; background:#46E08F; box-shadow:0 0 0 0 rgba(70,224,143,.6); animation:pulse 2s infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(70,224,143,.5);} 70%{ box-shadow:0 0 0 8px rgba(70,224,143,0);} 100%{ box-shadow:0 0 0 0 rgba(70,224,143,0);} }
.topbar b{ color:#fff; }

/* ---------- Footer ---------- */
.footer{ background:var(--jade-900); color:#A9C4BB; }
.footer a{ color:#A9C4BB; }
.footer a:hover{ color:#fff; }
.footer h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.footer-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:860px){ .footer-cols{ grid-template-columns:1fr 1fr; gap:32px;} }
@media (max-width:520px){ .footer-cols{ grid-template-columns:1fr;} }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:14.5px; font-family:var(--font-ui); }

/* ---------- Floating CTA ---------- */
.fab-stack{ position:fixed; right:22px; bottom:22px; z-index:60; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab-wa{ width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:var(--sh-lg); transition:transform .2s var(--spring); }
.fab-wa:hover{ transform:scale(1.09) rotate(-4deg); }
.fab-wa svg{ width:32px; height:32px; }
.fab-quote{ background:linear-gradient(120deg,var(--cerise),var(--tangerine)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; padding:14px 22px; border-radius:var(--r-pill); box-shadow:var(--sh-cta); display:inline-flex; gap:8px; align-items:center; }
.fab-quote:hover{ background:linear-gradient(120deg,var(--cerise-600),#E07F1E); }
@media (max-width:720px){ .fab-quote span.hide-sm{ display:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-blobs span{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; }
.b1{ width:340px; height:340px; background:var(--butter-soft); top:-80px; right:-60px; }
.b2{ width:260px; height:260px; background:var(--cerise-soft); bottom:-60px; left:-40px; }
.b3{ width:200px; height:200px; background:var(--jade-soft); top:40%; right:30%; opacity:.4; }
.hero > *{ position:relative; z-index:1; }

/* ---------- Forms ---------- */
.field{ display:block; margin-bottom:16px; }
.field > label{ display:block; font-family:var(--font-ui); font-weight:600; font-size:13px; color:var(--ink-700); margin-bottom:7px; }
.input,.select,.textarea{ width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink-900); background:#fff; border:1.5px solid var(--ink-200); border-radius:var(--r-md); padding:13px 15px; transition:border-color .14s, box-shadow .14s; }
.textarea{ min-height:110px; resize:vertical; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--jade); box-shadow:0 0 0 4px rgba(14,115,97,.15); }

/* ---------- Prose ---------- */
.prose{ font-size:18px; color:var(--ink-700); line-height:1.78; }
.prose h2{ font-size:30px; margin-top:1.6em; }
.prose h3{ font-size:22px; margin-top:1.4em; color:var(--ink-900); }
.prose p{ margin:0 0 1.1em; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.prose li{ margin-bottom:.55em; }
.prose strong{ color:var(--ink-900); }
.prose a{ color:var(--cerise-600); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{ border-left:4px solid var(--tangerine); background:var(--tangerine-soft); margin:1.6em 0; padding:18px 24px; border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink-800); font-style:italic; }
.prose hr{ border:none; border-top:1px solid var(--ink-200); margin:2em 0; }

/* ---------- Breadcrumb ---------- */
.crumb{ font-family:var(--font-ui); font-size:13.5px; color:var(--ink-500); display:flex; gap:8px; flex-wrap:wrap; }
.crumb a{ color:var(--ink-500); } .crumb a:hover{ color:var(--jade); }

/* ---------- Pill tag ---------- */
.pill-tag{ display:inline-block; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--jade); background:var(--jade-soft); padding:5px 12px; border-radius:var(--r-pill); }
.pill-tag.cerise{ color:var(--cerise-600); background:var(--cerise-soft); }
.pill-tag.tang{ color:#B36A12; background:var(--tangerine-soft); }

.lead{ font-size:20px; line-height:1.6; color:var(--ink-600); }
.skip-link{ position:absolute; left:-999px; }
.skip-link:focus{ left:16px; top:16px; z-index:200; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--sh-md); }

/* dotted connector for timeline */
.dotline{ background-image:radial-gradient(var(--ink-300) 2px, transparent 2px); background-size:14px 14px; }

/* uni row */
.uni-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 30px; }
.uni-item{ display:flex; align-items:center; gap:10px; opacity:.85; transition:opacity .2s, transform .2s; }
.uni-item:hover{ opacity:1; transform:translateY(-2px); }
.uni-item img{ width:34px; height:38px; }
.uni-item span{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--jade); }

/* ---------- Responsive safeguard for inline 2-col grids ---------- */
@media (max-width:920px){
  main [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  main aside[style*="sticky"]{ position:static !important; top:auto !important; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .wrap,.wrap-narrow{ padding-inline:18px; }
  .btn-lg{ padding:16px 26px; font-size:16px; }
  .fab-stack{ right:16px; bottom:16px; }
}