@font-face { font-family: "Mikado"; src: url(/hc/theming_assets/01KYMX3G0C8NN15PPM8WX59Y07) format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mikado"; src: url(/hc/theming_assets/01KYMX3G60P7JE5TNVVJS7133P) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mikado"; src: url(/hc/theming_assets/01KYMX3G39BYCWSGT40VT4TYJJ) format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mikado"; src: url(/hc/theming_assets/01KYMX3G3DP3ESAY24F4FHTN7J) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/hc/theming_assets/01KYMX3G5AFPBH3H999NRM9WY4) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/hc/theming_assets/01KYMX3G3ETRCPBRQ1Y6ZGPH35) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/hc/theming_assets/01KYMX3G3F50P3VEVG9FDSVRXR) format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/hc/theming_assets/01KYMX3G6EYJF16Z5WBN0JHV16) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   Joie Help Centre 2026 · theme stylesheet
   Design system: mango, ink, periwinkle, fern, mint, cream
   ============================================================ */

:root {
  --mango: #F2A900;
  --mango-text: #926600;
  --ink: #4A443A;
  --blue: #295891;
  --fern-text: #1F6B58;
  --grad: linear-gradient(90deg, #FFF7E5 0%, #E9F7F4 100%);
  --periwinkle: #3777C4;
  --fern: #35A184;
  --mint: #DDF1E9;
  --cream: #F5F0E7;
  --body: #434446;
  --line: #E7E4DC;
  --paper: #FFFFFF;
  --radius: 15px;
  --radius-lg: 15px;
  --shadow: 0 10px 30px rgba(74, 68, 58, 0.10);
  --font-display: "Mikado", system-ui, sans-serif;
  --font-body: "Lexend", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
a { color: var(--periwinkle); text-decoration: none; }
a:hover { text-decoration: none; opacity: .92; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.pagepad { padding-top: 40px; padding-bottom: 56px; }
.small { font-size: 14px; color: var(--body); }
.fineprint { font-size: 12px; color: var(--body); margin-top: 14px; }

/* ---------- type ---------- */
h1, h2, h3, h4, .h2, .h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; }
.display { font-size: clamp(40px, 6vw, 64px); font-weight: 500; letter-spacing: -.01em; }
.display .l1 { color: #FFFFFF; font-weight: 500; }
.display .l2 { color: #434446; font-weight: 700; }
.display.on-light .l1 { color: var(--ink); }
.display-2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 500; color: var(--ink); }
.display-2 b { color: #434446; font-weight: 700; }
.h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 500; color: var(--ink); }
.h2 b { font-weight: 700; }
.band-cream .h2 b, .band .h2 b { color: inherit; }
.h3 { font-size: 18px; font-weight: 700; color: var(--ink); }
.fern { color: var(--blue); }
.lede { color: var(--body); margin: 10px 0 0; }
.spark { color: var(--mango); display: inline-block; width: .78em; margin-left: .1em; transform: translateY(-.5em); }
.spark svg { width: 100%; height: auto; display: block; }
.spark.big svg { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  border-radius: 4px; padding: 12px 32px; border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-blue { background: var(--periwinkle); color: #fff; }
.btn-blue:hover { background: #295891; color: #fff; }
.btn-sm { padding: 8px 20px; font-size: 14px; }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- header ---------- */
.site-head { background: #fff; position: sticky; top: 0; z-index: 50; }
.site-head { position: relative; }
.head-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 28px; min-height: 86px; }
.main-nav { justify-self: start; }
.brand-link { justify-self: center; display: inline-block; line-height: 0; }
.head-actions { justify-self: end; margin-left: 0; }
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff;
  background: var(--mango); padding: 14px 20px 16px; border-radius: 0 0 16px 16px;
  align-self: flex-start; line-height: 1;
}
.brand:hover { color: #fff; }
.brand-sm { padding: 10px 14px 12px; font-size: 16px; border-radius: 0 0 12px 12px; }
.main-nav { display: flex; gap: 22px; font-weight: 700; font-size: 14px; }
.main-nav a { color: var(--ink); }
.main-nav a:hover { color: var(--periwinkle); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.head-link { color: var(--body); font-weight: 700; font-size: 14px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--ink); margin: 4.5px 0; border-radius: 2px; }

/* ---------- footer ---------- */
.site-foot { background: var(--cream); margin-top: auto; }
.foot-in { display: flex; align-items: center; justify-content: flex-start; max-width: none; margin: 0; padding: 30px 28px; }
.foot-nav { display: flex; gap: 30px; font-size: 14px; font-weight: 700; }
.foot-nav a { color: var(--body); }

/* ---------- homepage hero ---------- */
.hero { position: relative; overflow: hidden; background: #6d675e; }
.hero-media {
  position: absolute; inset: 0;
  background: url(/hc/theming_assets/01KYMX3G274W4JXP6AG6NPQHYC) center / cover no-repeat;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(52, 54, 58, .84) 0%, rgba(52, 54, 58, .5) 48%, rgba(52, 54, 58, .18) 100%);
}
.hero-in { position: relative; padding: 40px 24px; min-height: clamp(400px, 36vw, 600px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.wrap.hero-in { max-width: none; margin: 0; padding-left: clamp(40px, 8vw, 120px); }
.hero-sub { color: #fff; font-weight: 700; margin: 18px 0 2px; }
.hero-sub.ink { color: var(--ink); }
.hero-kick { color: var(--mango); font-weight: 700; font-size: 14px; margin: 0 0 22px; }

/* search */
.hero-search form, .hero-search { max-width: 460px; }
.hero-search input[type="search"] {
  width: 100%; border: 0; border-radius: 4px; padding: 15px 120px 15px 46px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E675C' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") 18px center no-repeat;
  outline: none;
}
.hero-search { position: relative; }
.hero-search input[type="submit"], .hero-search button[type="submit"] {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: var(--periwinkle); color: #fff; border: 0; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 9px 22px; cursor: pointer;
}

/* ---------- quick help cards ---------- */
.band { padding: 56px 0; }
.band-cream { background: var(--cream); }
.band-mint { background: var(--mint); }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.quick-card {
  background: var(--cream); border-radius: var(--radius); padding: 26px 24px;
  display: block; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.band-cream .quick-card, .cream-on-cream { background: #fff; }
.quick-card:hover { transform: translateY(-3px); color: var(--ink); }
.quick-ico { font-size: 22px; color: var(--body); display: block; margin-bottom: 14px; }
.quick-card b { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: block; margin-bottom: 4px; }
.quick-card span { font-size: 14px; color: var(--body); }
.mark { background: var(--mint); padding: 2px 10px; border-radius: 8px; font-weight: 700; }

/* ---------- gear categories ---------- */
.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.gear-card { text-align: center; color: var(--ink); }
.gear-ring {
  width: 168px; height: 168px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
  transition: transform .15s ease;
}
.gear-card:hover .gear-ring { transform: scale(1.04); }
.gear-ico {
  width: 146px; height: 146px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: var(--body); box-shadow: inset 0 0 0 1px var(--line);
}
.gear-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }

/* ---------- parent test band ---------- */
.pt-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pt-checks { display: grid; gap: 12px; }
.pt-check {
  background: #fff; border-radius: 15px; padding: 13px 18px;
  font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.pt-check b { font-family: var(--font-display); font-weight: 700; }
.tickmark { color: var(--fern); font-weight: 700; letter-spacing: 2px; }
.pt-copy .h2 { margin-bottom: 6px; }
.pt-copy .h2 b { color: var(--mango); }
.pt-copy .small { margin-bottom: 18px; display: block; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; }
.breadcrumbs li { color: var(--periwinkle); }
.breadcrumbs li + li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background-color: #434446; -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14.4746%2012L7.12462%204.65C6.87462%204.4%206.75379%204.10417%206.76212%203.7625C6.77046%203.42083%206.89962%203.125%207.14962%202.875C7.39962%202.625%207.69546%202.5%208.03712%202.5C8.37879%202.5%208.67462%202.625%208.92462%202.875L16.5996%2010.575C16.7996%2010.775%2016.9496%2011%2017.0496%2011.25C17.1496%2011.5%2017.1996%2011.75%2017.1996%2012C17.1996%2012.25%2017.1496%2012.5%2017.0496%2012.75C16.9496%2013%2016.7996%2013.225%2016.5996%2013.425L8.89962%2021.125C8.64962%2021.375%208.35796%2021.4958%208.02462%2021.4875C7.69129%2021.4792%207.39962%2021.35%207.14962%2021.1C6.89962%2020.85%206.77462%2020.5542%206.77462%2020.2125C6.77462%2019.8708%206.89962%2019.575%207.14962%2019.325L14.4746%2012Z%22/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14.4746%2012L7.12462%204.65C6.87462%204.4%206.75379%204.10417%206.76212%203.7625C6.77046%203.42083%206.89962%203.125%207.14962%202.875C7.39962%202.625%207.69546%202.5%208.03712%202.5C8.37879%202.5%208.67462%202.625%208.92462%202.875L16.5996%2010.575C16.7996%2010.775%2016.9496%2011%2017.0496%2011.25C17.1496%2011.5%2017.1996%2011.75%2017.1996%2012C17.1996%2012.25%2017.1496%2012.5%2017.0496%2012.75C16.9496%2013%2016.7996%2013.225%2016.5996%2013.425L8.89962%2021.125C8.64962%2021.375%208.35796%2021.4958%208.02462%2021.4875C7.69129%2021.4792%207.39962%2021.35%207.14962%2021.1C6.89962%2020.85%206.77462%2020.5542%206.77462%2020.2125C6.77462%2019.8708%206.89962%2019.575%207.14962%2019.325L14.4746%2012Z%22/%3E%3C/svg%3E") no-repeat center / contain; }
.breadcrumbs a { color: var(--periwinkle); }

/* ---------- category page ---------- */
.cat-hero { background: var(--grad); padding: 38px 0 44px; position: relative; }
.cat-hero .wrap { position: relative; }
.cat-hero .star { position: absolute; right: 24px; top: 4px; color: var(--mango); font-size: 24px; }
.cat-hero .hero-search { margin-top: 24px; }
.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.range-card {
  background: var(--cream); border-radius: var(--radius); padding: 22px 22px;
  display: flex; align-items: center; gap: 16px; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.range-card:hover { transform: translateY(-2px); color: var(--ink); }
.range-ico {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.range-tx { flex: 1; min-width: 0; }
.range-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: block; }
.range-sub { font-size: 14px; color: var(--body); display: block; }
.chev { color: var(--periwinkle); font-size: 22px; font-weight: 700; }
.cantfind {
  margin-top: 36px; background: var(--grad);
  border-radius: var(--radius-lg); padding: 30px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cantfind p { margin: 4px 0 0; color: var(--ink); }

/* ---------- section page ---------- */
.list-cards { display: grid; gap: 16px; margin-top: 24px; }
.list-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; display: flex; align-items: center; gap: 16px; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.list-card:hover { border-color: var(--periwinkle); transform: translateY(-1px); color: var(--ink); }
.list-card b { font-family: var(--font-display); font-weight: 700; font-size: 16px; flex: 1; }
.promoted-star { color: var(--mango); }

/* ---------- article page ---------- */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; }
.art-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.6vw, 38px); color: #434446; margin: 4px 0 6px; }
.art-meta { color: var(--body); font-size: 14px; margin: 0 0 22px; }
.content { color: var(--ink); }
.content img { border-radius: var(--radius); }
.content h2, .content h3 { font-family: var(--font-display); font-weight: 700; margin: 28px 0 10px; }
.content table { width: 100%; border-collapse: collapse; background: var(--cream); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.content table td, .content table th { padding: 11px 16px; border-bottom: 1px solid #EDE7DA; text-align: left; }
.content a { font-weight: 700; }
.content blockquote { margin: 20px 0; padding: 16px 20px; background: var(--cream); border-left: 4px solid var(--mango); border-radius: 0 var(--radius) var(--radius) 0; }
.helped {
  margin-top: 40px; background: var(--cream); border-radius: var(--radius);
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.vote { display: flex; gap: 10px; }
.vote button { border-radius: 4px; }

.art-side { display: grid; gap: 22px; align-content: start; }
.side-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--body); font-weight: 700; margin: 0 0 4px; }
.related-articles h2, .art-side .related-articles h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--body); font-family: var(--font-body); font-weight: 700; margin: 0 0 8px; }
.related-articles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.related-articles a { font-weight: 700; font-size: 14px; }
.stuck { background: #FFF7E5; border-radius: var(--radius-lg); padding: 24px 22px; color: #434446; }
.stuck .h3 { color: #fff; margin-bottom: 2px; }
.stuck p { margin: 0 0 16px; font-size: 14px; }

/* ---------- contact / new request ---------- */
.contact-hero { background: var(--grad); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact-grid.pagepad { padding-top: 44px; padding-bottom: 44px; }
.spark.big { font-size: 24px; vertical-align: baseline; line-height: 1; margin: 0 0 10px; display: block; }
.mail { font-weight: 700; color: var(--ink); }
.contact-card { background: #fff; border-radius: var(--radius-lg); padding: 34px 34px 28px; }

.joie-form .form-field, .request-form .form-field { margin-bottom: 18px; }
.joie-form label, .request-form label { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: block; margin-bottom: 7px; }
.joie-form input[type="text"], .joie-form input[type="email"], .joie-form textarea, .joie-form select,
.request-form input[type="text"], .request-form input[type="email"], .request-form textarea, .request-form select {
  width: 100%; border: 1px solid #898B8E; border-radius: 4px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: #434446; background: #fff; outline: none;
}
.joie-form textarea, .request-form textarea { min-height: 130px; resize: vertical; }
.joie-form input:focus, .joie-form textarea:focus, .joie-form select:focus,
.request-form input:focus, .request-form textarea:focus, .request-form select:focus { border-color: var(--periwinkle); }
.joie-form input[type="submit"], .request-form input[type="submit"], .request-form button[type="submit"] {
  background: var(--periwinkle); color: #fff; border: 0; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 13px 28px; cursor: pointer; float: right;
}

/* ---------- requests / confirmation ---------- */
.success-card {
  background: #fff; border-radius: var(--radius);
  border-left: 6px solid var(--fern); padding: 24px 28px;
  display: flex; gap: 18px; align-items: flex-start; margin-bottom: 40px;
}
.success-card p { margin: 4px 0 0; color: var(--ink); }
.tick {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mint); color: var(--fern); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.req-table { margin-top: 20px; display: grid; }
.req-row {
  display: flex; align-items: center; gap: 16px; padding: 18px 6px;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.req-row:hover { background: #FBF8F1; color: var(--ink); }
.req-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.req-main { flex: 1; min-width: 0; display: grid; }
.req-main b { font-family: var(--font-display); font-weight: 700; }
.pill {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 5px 14px; border-radius: 4px; background: var(--cream); color: var(--body); text-transform: lowercase;
}
.pill-open, .pill-new { background: var(--mint); color: var(--fern); }
.pill-solved, .pill-closed { background: var(--cream); color: var(--body); }
.pill-pending, .pill-hold { background: #FBEECC; color: #B07C00; }

/* request detail */
.req-detail { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; margin-top: 24px; overflow-wrap: break-word; word-break: break-word; }
.req-detail .h2 { margin-bottom: 4px; }

/* ---------- search results ---------- */
.sr-list { display: grid; gap: 8px; margin-top: 20px; }
.sr-row { display: block; padding: 18px 20px; border-radius: var(--radius); background: var(--cream); color: var(--ink); }
.sr-row:hover { background: var(--mint); color: var(--ink); }
.sr-row b { font-family: var(--font-display); font-weight: 700; display: block; margin-bottom: 2px; }
.sr-row p { margin: 0; }
.search-results-title-spacer { margin-top: 8px; }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: flex-start; margin-top: 36px; }
.pagination ul, .pagination ol { list-style: none; display: flex; gap: 6px; padding: 0; }
.pagination a, .pagination span {
  display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 4px; font-weight: 700; font-size: 14px; color: var(--ink); background: var(--cream);
}
.pagination .pagination-current span, .pagination .current { background: var(--periwinkle); color: #fff; }

/* ---------- error ---------- */
.error-hero { text-align: center; padding: 90px 24px; }
.error-hero .display-2 { margin-bottom: 8px; }

/* ---------- notifications (Zendesk flash) ---------- */
.notification, .alert {
  border-radius: var(--radius); padding: 14px 20px; margin: 18px auto; max-width: 1160px;
  background: var(--mint); color: var(--ink); font-weight: 700; border-left: 5px solid var(--fern);
}
.notification-error, .alert-error { background: #FBE3D9; border-left-color: #D0603C; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .quick-grid, .gear-grid, .range-grid { grid-template-columns: 1fr; }
  .gear-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .gear-ring { width: 104px; height: 104px; }
  .gear-ico { width: 88px; height: 88px; font-size: 28px; }
  .pt-grid, .contact-grid, .article-wrap { grid-template-columns: 1fr; gap: 32px; }
  .brand-row { padding: 13px 12px; }
  .brand-img-head { height: 34px; }
  .head-in { grid-template-columns: auto 1fr auto; min-height: 68px; padding: 0 14px; }
  .brand-img-head { height: 38px; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0; padding: 10px 24px 18px;
    box-shadow: 0 14px 24px rgba(74, 68, 58, .12);
  }
  .main-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .head-link { display: none; }
  .hero-in { min-height: clamp(340px, 120vw, 520px); }
  .cantfind { flex-direction: column; align-items: flex-start; }
}

/* ---------- in-article content components ----------
   Paste the matching HTML blocks into the article editor
   (source code view) and these styles apply automatically. */

.kb-glance {
  display: flex; gap: 0; background: var(--cream); border-radius: var(--radius);
  overflow: hidden; margin: 8px 0 24px;
}
.kb-glance-photo {
  flex: 0 0 42%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.kb-glance-photo img { max-height: 260px; width: auto; border-radius: 0; }
.kb-glance-specs { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.kb-glance-specs h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.kb-glance-specs table { width: 100%; border-collapse: collapse; background: transparent; font-size: 14px; }
.kb-glance-specs td { padding: 9px 0; border-bottom: 1px solid #EDE7DA; }
.kb-glance-specs td:first-child { color: var(--body); }
.kb-glance-specs td:last-child { text-align: right; font-weight: 700; }
.kb-glance-specs tr:last-child td { border-bottom: 0; }

.kb-download {
  display: flex; align-items: center; gap: 16px; background: var(--cream);
  border-radius: var(--radius); padding: 16px 20px; margin: 18px 0;
}
.kb-download-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--body);
}
.kb-download-tx { flex: 1; min-width: 0; }
.kb-download-tx b { font-family: var(--font-display); font-weight: 700; display: block; }
.kb-download-tx span { font-size: 12px; color: var(--body); }
.kb-download .btn { flex: 0 0 auto; }

.kb-video {
  position: relative; border-radius: var(--radius); overflow: hidden; margin: 18px 0;
  background: var(--grad);
}
.kb-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.kb-video-caption {
  padding: 12px 18px; font-family: var(--font-display); font-weight: 700; color: #1F6B58; font-size: 14px;
}
.kb-video-caption span { font-family: var(--font-body); font-weight: 600; color: #2E7A66; font-size: 12px; margin-left: 8px; }

/* ---------- per-category circle photos (UK prod IDs) ----------
   Drop a photo URL into each rule and the circle shows product
   photography instead of the icon. IDs from the live UK help centre. */
.gear-card[data-category] .gear-ico { background-size: cover; background-position: center; }
/*
.gear-card[data-category="4408055606036"] .gear-ico { background-image: url(PUSHCHAIRS_PHOTO); color: transparent; }
.gear-card[data-category="4408055601812"] .gear-ico { background-image: url(CAR_SEATS_PHOTO); color: transparent; }
.gear-card[data-category="4408055617044"] .gear-ico { background-image: url(HIGHCHAIRS_PHOTO); color: transparent; }
.gear-card[data-category="4408055628436"] .gear-ico { background-image: url(COTS_CRIBS_PHOTO); color: transparent; }
.gear-card[data-category="4408055633044"] .gear-ico { background-image: url(SWINGS_BOUNCERS_PHOTO); color: transparent; }
.gear-card[data-category="4408048589460"] .gear-ico { background-image: url(CARRIERS_PHOTO); color: transparent; }
*/

/* ---------- video poster card (click to play) ---------- */
.kb-video-poster {
  position: relative; border-radius: var(--radius); overflow: hidden; margin: 18px 0;
  background: var(--grad); background-size: cover; background-position: center;
  aspect-ratio: 16 / 7.5; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; width: 100%; text-align: left;
}
.kb-video-poster .play {
  width: 72px; height: 72px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(31, 107, 88, .25); transition: transform .12s ease;
}
.kb-video-poster:hover .play { transform: scale(1.06); }
.kb-video-poster .play::after {
  content: ""; margin-left: 5px;
  border-left: 20px solid #4E7ED1; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.kb-video-poster .kb-video-title {
  position: absolute; left: 24px; bottom: 18px;
  font-family: var(--font-display); font-weight: 700; color: var(--fern-text); font-size: 16px;
}
.kb-video-poster .kb-video-title span {
  display: block; font-family: var(--font-body); font-weight: 600; color: #2E7A66; font-size: 12px; margin-top: 2px;
}
.kb-video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); margin: 18px 0; }

a.kb-video-poster { text-decoration: none; color: inherit; }

/* ---------- custom contact form ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.joie-form .optional { font-weight: 600; color: var(--body); font-size: 12px; }
.joie-form select {
  width: 100%; border: 1px solid #898B8E; border-radius: 4px; padding: 12px 40px 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: #434446; background: #fff; outline: none;
  appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236E675C' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
.joie-form select:focus { border-color: var(--periwinkle); }
.form-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 6px; }
.form-foot .fineprint { margin: 0; max-width: 55%; }
.form-error {
  background: #FBE3D9; border-left: 4px solid #D0603C; color: #7C3A22;
  border-radius: 0 12px 12px 0; padding: 10px 16px; font-size: 14px; font-weight: 700;
}
.btn[disabled] { opacity: .6; pointer-events: none; }
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .fineprint { max-width: none; }
}

/* ---------- section product cards ---------- */
.prod-card { align-items: center; padding: 22px; gap: 22px; }
.prod-card .chev { display: none; }
.prod-thumb {
  flex: 0 0 116px; width: 116px; height: 116px; border-radius: 15px;
  background: var(--grad); padding: 9px;
  display: flex; align-items: center; justify-content: center;
}
.prod-thumb { overflow: hidden; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: 13px; transform: scale(1.28); }
.prod-tx { flex: 1; min-width: 0; display: grid; gap: 9px; }
.prod-card b { font-size: 21px; }
.prod-sub { color: var(--body); font-size: 14px; }
.prod-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.prod-chips .chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 400; font-size: 14px;
  border: 2px solid #3777C4; color: #3777C4; background: #FFFFFF;
  border-radius: 4px; padding: 8px 20px;
}
.prod-chips .chip svg { width: 24px; height: 24px; }
@media (max-width: 700px) {
  .prod-card { flex-direction: column; align-items: flex-start; }
}
.side-links { display: grid; gap: 9px; }
.side-links a { font-weight: 700; font-size: 14px; }
.vote .btn, .vote button, .vote input[type="button"] { text-transform: lowercase; }

/* ---------- creative review round 1 ---------- */
.band-mint .h2 b, .pt-copy .h2 b { color: #434446; }
.hero-kick { color: var(--mango); }
.stuck .h3 { color: #295891; }
.stuck p { color: #434446; }
.brand-img { display: block; height: 56px; width: auto; }

.quick-ico svg, .range-ico svg, .req-ico svg { width: 30px; height: 30px; }
.range-ico svg { width: 26px; height: 26px; }
.req-ico svg { width: 24px; height: 24px; }
.kb-video-poster.has-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,25,23,0) 45%, rgba(20,25,23,.55) 100%);
}
.kb-video-poster.has-thumb .kb-video-title { color: #fff; z-index: 1; }
.kb-video-poster.has-thumb .kb-video-title span { color: #F2EFEA; }
.kb-video-poster .play { z-index: 1; }

.art-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--body); font-weight: 700; margin: 14px 0 2px; }

.gear-ico { overflow: hidden; }
.gear-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: #fff; transform: scale(1.18); }
.range-ico { overflow: hidden; background: var(--grad); }
.range-ico img { width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: 50%; transform: scale(1.5); }

.brand-img-head { height: 48px; margin: 0; }

/* keep background imagery in print and pdf exports */
@media print {
  .hero-media, .cat-hero, .contact-hero, .cantfind, .stuck, .gear-ring, .range-ico,
  .kb-video-poster, .prod-thumb, .band-mint, .band-cream, .site-foot {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

.art-main { min-width: 0; }
.contact-copy { padding-top: 6px; }

/* hand drawn arrow beside the search bar, like the mockup */
.hero-arrow { position: absolute; left: calc(100% + 12px); bottom: 8px; width: 60px; color: #FFFFFF; pointer-events: none; }
.hero-arrow svg { width: 100%; height: auto; display: block; }
@media (max-width: 1100px) { .hero-arrow { display: none; } }

/* design system alignment pass */
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #295891; outline-offset: 2px; }
.btn[disabled], .btn.disabled { background: #F0F0F1; color: #898B8E; pointer-events: none; }
.joie-form input, .joie-form select, .joie-form textarea { border-radius: 4px; }
.joie-form .field-help { font-size: 12px; color: #898B8E; margin-top: 4px; }
.joie-form input.error, .joie-form select.error, .joie-form textarea.error { border-color: #B9071F; }
.joie-form .field-error, .notification-error { color: #B9071F; font-size: 12px; }
.kb-body a { color: #3777C4; font-weight: 700; }
.kb-body a:hover { color: #295891; }
.mark { background: #FFF3D6; border-radius: 12px 5px 14px 6px / 7px 13px 6px 12px; }
.hero-search input[type="submit"], .search input[type="submit"] { border-radius: 4px; }

/* pooja round: arrows slate 700, logo to nav breathing room */
.chev, .range-card .chev, .list-card .chev { color: #434446; }
.brand-row { padding-bottom: 8px; }

/* typography metrics to the design system scale */
body { font-size: 16px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.4; }
.fineprint { font-size: 12px; line-height: 1.4; }
.kb-body { font-size: 16px; line-height: 1.5; }
.kb-body p { line-height: 1.5; }
h1, h2, h3, h4, .display, .display-2, .h2, .h3, .art-title, .cat-title { letter-spacing: 0.5px; }
.display, .display-2 { line-height: 1.2; }
.h2 { line-height: 1.1; }
.h3 { line-height: 1.2; }

/* full system alignment: headings slate, single weight, role mapped scale */
.on-light .l2, .display-2, .display-2 b, .cat-title, .cat-title b, .art-title, .h2, .h2 b, .h3 { color: #434446; }
.display b, .display-2 b, .h2 b, .h3 b, .cat-title b { font-weight: inherit; }
.art-title, .cat-title, .display-2 { font-size: clamp(40px, 4.2vw, 50px); line-height: 1.2; }
.display { font-size: clamp(40px, 4.2vw, 50px); line-height: 1.2; }
.h2 { font-size: 34px; line-height: 1.3; }
.h3 { font-size: 20px; line-height: 1.3; }
@media (max-width: 720px) {
  .display, .display-2, .art-title, .cat-title { font-size: 28px; }
  .h2 { font-size: 26px; }
}

.hero .display .l1, .hero .display .l2 { color: #FFFFFF; font-weight: inherit; }

/* design system input treatment: pooja round two */
.hero-search input[type="search"], .hero-search input[type="text"],
.search input[type="search"], .search input[type="text"],
.joie-form input, .joie-form select, .joie-form textarea,
form.request-form input[type="text"], form.request-form textarea, form.request-form select {
  background: #FFFFFF; border: 1px solid #898B8E; border-radius: 4px;
  padding: 12px 14px; font-size: 16px; color: #434446; box-shadow: none;
}
.hero-search input::placeholder, .joie-form ::placeholder { color: #898B8E; }
.hero-search input:focus, .search input:focus,
.joie-form input:focus, .joie-form select:focus, .joie-form textarea:focus,
form.request-form input:focus, form.request-form textarea:focus {
  border-color: #3777C4; outline: 2px solid #295891; outline-offset: 1px;
}
.hero-search { background: transparent; box-shadow: none; display: flex; gap: 8px; }

/* pooja voice round */
.hero-kick { color: #FFFFFF; }
.hero .spark { color: #FFFFFF; }
.btn-secondary, .stuck .btn-blue {
  background: transparent; border: 2px solid #3777C4; color: #3777C4;
}
.btn-secondary:hover, .stuck .btn-blue:hover { background: #3777C4; color: #FFFFFF; }

/* pooja ocr round */
.cantfind .btn-blue, .cantfind .btn {
  background: transparent; border: 2px solid #3777C4; color: #3777C4;
}
.cantfind .btn-blue:hover, .cantfind .btn:hover { background: #3777C4; color: #FFFFFF; }
main input[type="text"], main input[type="email"], main input[type="tel"],
main select, main textarea {
  background: #FFFFFF; border: 1px solid #898B8E; border-radius: 4px;
  padding: 12px 14px; font-size: 16px; color: #434446;
}
main input:focus, main select:focus, main textarea:focus {
  border-color: #3777C4; outline: 2px solid #295891; outline-offset: 1px;
}
.sec-hero .hero-search { margin-top: 20px; max-width: 460px; }

/* pooja review 27 july */
.hero-search input[type="search"], .search input[type="search"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E675C' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat; background-position: 14px center;
  padding-left: 42px; padding-right: 108px;
}
.joie-form select, .request-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236E675C' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
}


/* pooja icon and typography round (v2.9.35) */
.chip svg { width: 24px; height: 24px; vertical-align: -6px; margin-right: 6px; }
.chip { background: #FFFFFF; border: 2px solid #3777C4; color: #3777C4; font-family: var(--font-body); font-weight: 400; font-size: 14px; border-radius: 4px; padding: 6px 12px; }
.kb-download { position: relative; padding-left: 56px; }
.kb-download::before { content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: #434446; -webkit-mask: url(/hc/theming_assets/01KYMX3G35ZQDTX5VE91WF0JCS) center / contain no-repeat; mask: url(/hc/theming_assets/01KYMX3G35ZQDTX5VE91WF0JCS) center / contain no-repeat; }
.kb-download .btn::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; background: currentColor; -webkit-mask: url(/hc/theming_assets/01KYMX3FX59X188K5M3CGPF5MF) center / contain no-repeat; mask: url(/hc/theming_assets/01KYMX3FX59X188K5M3CGPF5MF) center / contain no-repeat; }
.play-badge span, .play-badge::after { border: 0 !important; }
.play-badge { background: #FFFFFF; }
.play-badge::before { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; background: #434446; -webkit-mask: url(/hc/theming_assets/01KYMX3FZZ0ZNG6N9GZ53E56CN) center / contain no-repeat; mask: url(/hc/theming_assets/01KYMX3FZZ0ZNG6N9GZ53E56CN) center / contain no-repeat; }
/* 4. button typography: lexend regular sitewide */
.btn { font-family: var(--font-body); font-weight: 400; font-size: 18px; }
.btn-sm { font-size: 14px; }
/* 5. white secondary backgrounds */
.btn-secondary, .stuck .btn-blue, .cantfind .btn-blue, .cantfind .btn { background: #FFFFFF; }
.btn-secondary:hover, .stuck .btn-blue:hover, .cantfind .btn:hover { background: #3777C4; color: #FFFFFF; }
/* 6. contact form labels and typed text at 18 */
.joie-form label, form.request-form label { font-family: var(--font-body); font-weight: 400; font-size: 16px; }
.joie-form input, .joie-form select, .joie-form textarea,
form.request-form input[type="text"], form.request-form textarea, form.request-form select,
main input[type="text"], main input[type="email"], main select, main textarea { font-family: var(--font-body); font-weight: 400; font-size: 16px; }

.mail-ico { display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: -6px; background: #434446; -webkit-mask: url(/hc/theming_assets/01KYMX3G3K3ZSWAJC73WKBTNQS) center / contain no-repeat; mask: url(/hc/theming_assets/01KYMX3G3K3ZSWAJC73WKBTNQS) center / contain no-repeat; }

/* the baked row icon retires, the system document icon replaces it */
.kb-download .kb-download-ico { display: none; }

/* lexend reaches every button, classed or native */
.btn.btn, a.btn, button.btn,
input[type="submit"], button[type="submit"],
.hero-search input[type="submit"], .search input[type="submit"],
.article-vote, .article-vote span, .article-votes button {
  font-family: var(--font-body); font-weight: 400;
}
input[type="submit"], .hero-search input[type="submit"], .search input[type="submit"] { font-size: 14px; }


/* fine tune circle zoom (v2.9.65) */
.gear-card[data-category="4408048589460"] .gear-ico img { transform: scale(1.3) translateY(-5%); }
.gear-card[data-category="4408055633044"] .gear-ico img { transform: none; }
.gear-card[data-category="4408055606036"] .gear-ico img { transform: scale(1.26); }


/* ===== portal-style request page (v2.10.0) ===== */
.req-head { margin: 26px 0 18px; }
.req-head .h2 { margin: 0 0 4px; }
.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .req-grid { grid-template-columns: 1fr; } }
.msg { background: #F7F5F0; border-radius: 14px; padding: 14px 18px; margin: 0 0 10px; }
.msg-agent { background: #EAF1FA; }
.msg-meta { margin: 0 0 4px; color: #8b857a; }
.msg-agent .msg-meta { color: #3777C4; }
.msg-body > *:first-child { margin-top: 0; }
.msg-body > *:last-child { margin-bottom: 0; }
.msg-files { list-style: none; margin: 8px 0 0; padding: 0; }
.msg-files a { color: #3777C4; font-size: 12px; }
.reply-form { margin-top: 14px; }
.reply-box { width: 100%; min-height: 96px; border: 1px solid #EAE3D4; border-radius: 14px; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: #4A443A; resize: vertical; }
.reply-box:focus { outline: none; border-color: #3777C4; }
.reply-form input[type="submit"] { margin-top: 10px; }
.req-side { background: #F5F0E7; border-radius: 16px; padding: 16px 20px; }
.side-title { font-size: 12px; letter-spacing: .4px; color: #8b857a; margin: 0 0 4px; }
.side-rows { margin: 0; }
.side-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EAE3D4; font-size: 14px; }
.side-row:last-child { border-bottom: 0; }
.side-row dt { color: #8b857a; }
.side-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.side-note { margin: 10px 0 0; color: #8b857a; }
.pill.s-new { background: #FBF0D3; color: #926600; }
.pill.s-open, .pill.s-hold { background: #E8F0FA; color: #2B5C96; }
.pill.s-pending { background: #FDF6E3; color: #8A6D1A; }
.pill.s-solved, .pill.s-closed { background: #DDF1E9; color: #1D6E56; }


/* ===== request page fixes (v2.10.4) ===== */
.success-card[hidden] { display: none; }
.reply-attach { margin: 10px 0; }
.reply-form { margin-top: 16px; }


/* ===== shannon round 1 (v2.11.0) ===== */
/* hero scrim only behind the copy column, image clean on the right */
.hero-media::after {
  background: linear-gradient(90deg, rgba(52, 54, 58, .82) 0%, rgba(52, 54, 58, .55) 30%, rgba(52, 54, 58, 0) 62%);
}
/* carrier and cot circle photos re-centred */
.gear-card[data-category="4408048589460"] .gear-ico img { transform: scale(1.3) translateY(3%); }
.gear-card[data-category="4408055628436"] .gear-ico img { transform: scale(1.18) translateY(5%); }
/* category and product circles zoomed out so more of the product shows */
.prod-thumb img { transform: scale(1.1); }
.range-ico img { transform: scale(1.15); }


/* ===== circle centring, keyed on category name so it works on any instance (v2.11.7) ===== */
/* the previous rules keyed on production category ids and never matched on sandbox */
.gear-card[data-cat="baby carrier"] .gear-ico img { transform: scale(1.24) translateY(-7%); }
.gear-card[data-cat="cots & cribs"] .gear-ico img { transform: scale(1.16) translateY(-3%); }
.gear-card[data-cat="swings & bouncers"] .gear-ico img { transform: scale(1.2); }


/* ===== short page gap under the hero (v2.11.9) ===== */
/* body is a flex column at min-height 100vh, so on short pages the footer sits at the
   bottom and the hero gradient stopped early, leaving a white band. Let the main area
   and its first band grow so the background reaches the footer. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > .contact-hero,
main > .cat-hero { flex: 1 0 auto; }

/* ===== native zendesk request form inside the contact card (v2.11.10) ===== */
.contact-card .request-form { margin: 0; }
.contact-card .form-field { margin-bottom: 18px; }
.contact-card .form-field label { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: block; margin-bottom: 7px; }
.contact-card .form-field input[type="text"], .contact-card .form-field input[type="email"],
.contact-card .form-field textarea, .contact-card .form-field select,
.contact-card .form-field .nesty-input {
  width: 100%; border: 1px solid #D9D5CC; border-radius: 4px; background: #FDFCFa;
  padding: 11px 13px; font-size: 14px; font-family: var(--font-body); color: var(--ink);
}
.contact-card .form-field textarea { min-height: 130px; resize: vertical; }
.contact-card .form-field input:focus, .contact-card .form-field textarea:focus,
.contact-card .form-field select:focus, .contact-card .form-field .nesty-input:focus
{ outline: none; border-color: var(--periwinkle); box-shadow: 0 0 0 3px rgba(55,119,196,.12); }
.contact-card .request_ticket_form_id select { font-weight: 600; }
.contact-card footer input[type="submit"], .contact-card input[type="submit"] {
  background: var(--periwinkle); color: #fff; border: 0; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 12px 26px; cursor: pointer;
}
.contact-card input[type="submit"]:hover { filter: brightness(1.05); }
.contact-card #upload-dropzone {
  border: 1.5px dashed #C9C4B8; border-radius: 8px; background: #FBFAF6; padding: 14px; text-align: center;
}
.contact-card .form-field p { font-size: 12px; color: #898B8E; margin: 5px 0 0; }
.follow-up-hint { font-size: 14px; color: var(--body); margin-bottom: 14px; }
.contact-card .notification-error, .contact-card .notification-inline.notification-error
{ border-radius: 6px; font-size: 14px; }

/* ===== v2.11.11 form page fixes ===== */
/* no article suggestions popping under the subject field */
.contact-card .suggestion-list, .contact-card .searchbox-suggestions { display: none !important; }
/* left column rhythm */
.contact-copy { padding-top: 6px; }
.contact-copy .hero-sub { margin: 18px 0 10px; }
.contact-points { display: grid; gap: 16px; margin-top: 26px; }
.contact-point { margin: 0; }
.contact-point b { display: block; font-family: var(--font-display); font-size: 14px; margin-bottom: 4px; }
.contact-point span { display: block; font-size: 14px; color: var(--body); line-height: 1.55; }
/* request page balance */
.req-wrap { max-width: 1080px; margin: 0 auto; }
.req-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
.req-head { margin: 26px 0 22px; }
.success-card { display: flex; gap: 14px; align-items: flex-start; background: var(--mint); border-radius: var(--radius-lg); padding: 20px 22px; margin: 26px 0 6px; }
.success-card .tick { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--fern); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.success-card p { margin: 4px 0 0; font-size: 14px; }

/* ===== v2.11.12 ===== */
/* selects were clipping their text, give them a fixed comfortable height */
.contact-card .form-field select {
  height: 48px; padding: 0 36px 0 12px; line-height: normal;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A443A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* standalone received page */
.received-page {
  position: fixed; inset: 0; z-index: 80; background: var(--cream);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.received-page[hidden] { display: none; }
.received-open, .received-open body { overflow: hidden; }
.received-inner { text-align: center; max-width: 520px; }
.received-inner .tick.big {
  width: 64px; height: 64px; border-radius: 50%; background: var(--fern); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 18px;
}
.received-inner .display { margin: 0 0 14px; }
.received-sub { font-size: 16px; margin: 0 0 6px; }
.received-inner .small { margin: 0 0 26px; }
/* reply area: proper size, always works */
.reply-form { max-width: 640px; }
.reply-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: block; margin: 18px 0 7px; }
.reply-form textarea.reply-box, .reply-form textarea {
  width: 100%; min-height: 150px; border: 1px solid #D9D5CC; border-radius: 4px;
  background: #FDFCFa; padding: 12px 13px; font-size: 14px; font-family: var(--font-body);
  color: var(--ink); resize: vertical;
}
.reply-form textarea:focus { outline: none; border-color: var(--periwinkle); box-shadow: 0 0 0 3px rgba(55,119,196,.12); }
.reply-attach { margin: 12px 0 14px; }

/* ===== v2.11.13 ===== */
/* region and type of request are zendesk nesty dropdowns, an anchor not a select, size it like one */
.contact-card .form-field a.nesty-input, .contact-card .form-field .nesty-input {
  display: flex; align-items: center; height: 48px; padding: 0 36px 0 12px;
  line-height: 1.2; overflow: hidden; text-decoration: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A443A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.contact-card .nesty-panel { border: 1px solid #D9D5CC; border-radius: 6px; background: #fff; font-size: 14px; }
.contact-card .nesty-panel ul { margin: 0; padding: 6px 0; }
.contact-card .nesty-panel li { padding: 9px 14px; cursor: pointer; }
.contact-card .nesty-panel li:hover, .contact-card .nesty-panel li[aria-selected="true"] { background: var(--cream); }

/* ===== v2.11.14 requests list ===== */
.req-table { display: grid; gap: 12px; margin: 22px 0; }
.req-row {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; transition: box-shadow .15s ease, transform .15s ease;
}
.req-row:hover { box-shadow: 0 6px 18px rgba(74, 68, 58, .1); transform: translateY(-1px); }
.req-row .req-ico { flex: 0 0 34px; width: 34px; height: 34px; }
.req-row .req-main { flex: 1 1 auto; display: grid; gap: 3px; min-width: 0; }
.req-row .req-main b { font-family: var(--font-display); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-row .pill { flex: 0 0 auto; }

/* ===== v2.11.16 reply editor, proven portal pattern ===== */
.reply-form .comment-fields { display: grid; gap: 12px; }
.reply-form [data-helper="wysiwyg"], .reply-form .zd-comment-editor,
.reply-form .editor, .reply-form [contenteditable="true"] {
  min-height: 150px; border: 1px solid #D9D5CC; border-radius: 4px; background: #FDFCFa;
  padding: 12px 13px; font-size: 14px; font-family: var(--font-body); color: var(--ink);
}
.reply-form [contenteditable="true"]:focus { outline: none; border-color: var(--periwinkle); box-shadow: 0 0 0 3px rgba(55,119,196,.12); }
.reply-form textarea { width: 100%; min-height: 150px; border: 1px solid #D9D5CC; border-radius: 4px; background: #FDFCFa; padding: 12px 13px; font-size: 14px; font-family: var(--font-body); }
.reply-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.reply-controls label { font-size: 14px; color: var(--body); display: flex; align-items: center; gap: 7px; }

/* ===== v2.11.19 pooja arrows and lowercase search ===== */
.chev { color: #434446; display: inline-flex; align-items: center; }
.chev .pj-arrow { width: 16px; height: 16px; display: block; }
.hero-search input[type="submit"], form[role="search"] input[type="submit"],
form[role="search"] button, .search input[type="submit"] { text-transform: lowercase; }

/* v3.1.1: search bar layout fix */
.hero-search form { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.hero-search input[type="search"], .hero-search input[type="text"] { flex: 1 1 auto; min-width: 0; padding-left: 44px; }
.hero-search input[type="submit"], .hero-search button[type="submit"] { position: static; transform: none; flex: 0 0 auto; white-space: nowrap; }

/* v3.2.2 homepage tiles: product stands out of a small cream disc, shop style */
.gear-ring {
  width: 150px; height: 150px; background: #EBE1CC; border-radius: 50%;
  overflow: visible; position: relative; display: block; margin: 0 auto;
  box-shadow: none;
}
.gear-ico {
  position: absolute; inset: 0; overflow: visible; display: block;
  background: transparent; border-radius: 0;
}
.gear-ico img {
  position: absolute; left: 50%; bottom: -6%; width: 126%; height: 138%;
  transform: translateX(-50%); object-fit: contain; object-position: bottom;
  background: transparent; border-radius: 0; mix-blend-mode: multiply;
}
.gear-card { overflow: visible; }
.gear-name {
  text-transform: lowercase; color: #3A66C5;
  text-decoration: underline; text-underline-offset: 3px;
}


/* ================================================================
   category circles rebuild (v3.3.0)
   Products are transparent cutouts injected as <img> by script.js,
   sized larger than the circle so they overflow it. Hover fills the
   whole circle with brand mango, matching the main webpage.
   The old .gear-* rules above are superseded and now unused.
   ================================================================ */
.jcat-section, .jcat-section .wrap { overflow: visible; }

.jcat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 60px 28px; margin-top: 72px; overflow: visible;
}

.jcat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--ink); text-decoration: none;
}

.jcat-ring {
  width: 190px; height: 190px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 34px;
  transition: background .25s ease, transform .15s ease;
  /* no overflow: hidden anywhere in the tile, the spill IS the effect */
}

.jcat-disc {
  width: 100%; height: 100%; border-radius: 50%; background: #fff;
  display: flex; align-items: flex-end; justify-content: center;
  transition: background .25s ease, box-shadow .25s ease;
}

.jcat-img {
  height: 140%; width: auto; max-width: none; /* canvas carries headroom for popping tops */
  margin-bottom: 0; /* centred: products stay fully inside the circle */
  filter: drop-shadow(0 12px 12px rgba(74, 68, 58, .16));
  transition: transform .25s ease;
}

/* hover: whole circle fills the brand approved hover yellow #FFCD58 */
.jcat:hover .jcat-ring,
.jcat:focus-visible .jcat-ring { background: #FFCD58; }
.jcat:hover .jcat-disc,
.jcat:focus-visible .jcat-disc { background: #FFCD58; box-shadow: none; }
.jcat:hover .jcat-img { transform: translateY(-4px) scale(1.02); }

.jcat-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.jcat:hover .jcat-label,
.jcat:focus .jcat-label { text-decoration: underline; text-underline-offset: 3px; }

/* neutralise global link styling on the tiles */
a.jcat, a.jcat:hover, a.jcat:focus, a.jcat:active, a.jcat:visited {
  background: transparent; border: 0; outline: none;
  -webkit-tap-highlight-color: transparent;
}
a.jcat:focus-visible .jcat-ring { outline: 3px solid var(--periwinkle); outline-offset: 4px; }

/* per tile nudges if one cutout sits oddly, add to the tile via script or leave unused */
.jcat--wide .jcat-img { height: auto; width: 122%; }
.jcat--low .jcat-img { margin-top: 10%; }
.jcat--high .jcat-img { margin-bottom: 10%; }
.jcat--small .jcat-img { height: 114%; }

@media (max-width: 900px) {
  .jcat-grid { gap: 32px 14px; }
  .jcat-ring { width: 118px; height: 118px; margin-bottom: 24px; }
  .jcat-label { font-size: 14px; }
}


/* ================================================================
   v3.4.0 mobile hardening
   Article pages readable and comfortable on phones: stacked spec
   tables, fluid media, stacked download rows, footer and type scale.
   ================================================================ */
img, iframe, video { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  .wrap { padding-left: 16px; padding-right: 16px; }

  .kb-glance { display: block; }
  .kb-glance-photo { padding: 18px; }
  .kb-glance-photo img { max-height: 200px; }
  .kb-glance-specs { padding: 16px 16px 18px; }
  .kb-glance > h3 { padding: 16px 16px 0; margin: 0; }
  .kb-glance > table { margin: 8px 16px 16px; width: calc(100% - 32px); }
  .breadcrumbs { font-size: 12px; }
  .breadcrumbs, .breadcrumbs li { white-space: normal; overflow-wrap: anywhere; }

  .kb-glance table, .kb-body table { display: block; width: 100%; }
  .kb-glance tbody, .kb-body tbody { display: block; width: 100%; }
  .kb-glance tr, .kb-body tr {
    display: block; padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .kb-glance td, .kb-body td {
    display: block; width: 100%; padding: 0; border: 0;
    overflow-wrap: anywhere;
  }
  .kb-glance td:first-child, .kb-body td:first-child {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--body); margin-bottom: 3px;
  }
  .kb-glance td:last-child, .kb-body td:last-child { text-align: left; font-weight: 700; }
  .kb-glance-specs td, .kb-glance td { border-bottom: 0; }

  .kb-download { flex-wrap: wrap; row-gap: 10px; }
  .kb-download .btn, .kb-download a.btn { width: 100%; text-align: center; }
  .kb-downloads a.kb-download { width: 100%; }

  .kb-video-poster { width: 100%; }

  .foot-in { flex-wrap: wrap; gap: 14px 22px; padding: 24px 16px; }
  .foot-nav { flex-wrap: wrap; gap: 12px 22px; }

  .contact-card { padding: 18px 14px; }
  .cantfind { padding: 22px 18px; }
}

@media (max-width: 430px) {
  .display, .display-2, .art-title, .cat-title { font-size: 31px; }
  .h2 { font-size: 22px; }
  .prod-card b { font-size: 18px; }
  .jcat-ring { width: 104px; height: 104px; }
  .jcat-label { font-size: 12px; }
  .prod-chips .chip { padding: 7px 14px; font-size: 12px; }
}

/* ================================================================
   v3.5.0 polish: pagination pills, balanced glance, video grid
   ================================================================ */
.pagination { display: flex; gap: 10px; justify-content: center; padding: 8px 0 4px; }
.pagination li { list-style: none; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border: 2px solid #3777C4; border-radius: 4px;
  background: #FFFFFF; color: #3777C4; font-weight: 700; font-size: 14px;
  text-transform: lowercase; text-decoration: none;
}
.pagination a:hover { background: #3777C4; color: #FFFFFF; opacity: 1; }
.pagination .pagination-current span { border-color: var(--line); color: var(--body); }

.kb-glance { align-items: stretch; }
.kb-glance-photo { flex: 0 0 44%; padding: 14px; }
.kb-glance-photo img { width: 100%; height: 100%; max-height: none; object-fit: contain;
  mix-blend-mode: multiply; }
.kb-glance-specs { padding: 18px 22px; }
.kb-glance-specs td { padding: 7px 0; font-size: 14px; }

.kb-videos-h { margin: 26px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.kb-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 22px; }
.kb-videos .kb-video-poster { margin: 0; width: auto; }
@media (max-width: 700px) {
  .kb-videos { grid-template-columns: 1fr; }
}

/* ================================================================
   v3.6.1 glance, mirroring the shop product page: photo on a cream
   square, specs as a soft panel of single line rows
   ================================================================ */
.kb-glance { background: transparent; border: 0; border-radius: 0; overflow: visible;
  gap: 34px; align-items: flex-start; margin: 8px 0 26px; }
.kb-glance-photo { flex: 0 0 50%; background: var(--cream); border-radius: 8px;
  padding: 28px; min-height: 0; aspect-ratio: 1 / 1; align-self: flex-start;
  isolation: isolate; }
.kb-glance-photo img { width: 100%; height: 100%; max-height: none; object-fit: contain;
  mix-blend-mode: multiply; }
.kb-glance-specs { border-left: 0; padding: 4px 0 0; justify-content: flex-start; }
.kb-glance-specs h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: 0;
  text-transform: lowercase; color: var(--ink); font-weight: 700; margin: 0 0 12px; }
.kb-glance-specs table { display: block; }
.kb-glance-specs tbody { display: block; }
.kb-glance-specs tr { display: flex; gap: 12px; align-items: baseline;
  padding: 13px 18px; background: #F7F2E7; border-bottom: 1px solid #EAE2D2; }
.kb-glance-specs tr:first-child { border-radius: 12px 12px 0 0; }
.kb-glance-specs tr:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; }
.kb-glance-specs td { display: block; padding: 0; border: 0; }
.kb-glance-specs td:first-child { flex: 0 0 auto; min-width: 118px; font-size: 14px;
  font-weight: 400; letter-spacing: 0; text-transform: lowercase; color: #6B675E; }
.kb-glance-specs td:last-child { flex: 1; font-size: 14px; font-weight: 700;
  color: var(--ink); text-align: left; margin: 0; }
@media (max-width: 700px) {
  .kb-glance { gap: 0; border: 0; box-shadow: none; background: transparent; }
  .kb-glance-photo { margin-bottom: 16px; border: 0; border-radius: 12px; }
  .kb-glance-specs { border: 0; }
  .kb-glance-specs tr { flex-wrap: wrap; gap: 2px 12px; }
}

/* v3.6.2: heading above the whole glance, no inner photo box, single hairlines */
.kb-glance { position: relative; padding-top: 40px; }
.kb-glance .kb-glance-specs h3 { position: absolute; top: 0; left: 0; margin: 0; }
.kb-glance .kb-glance-specs td { border: 0; }
.kb-glance .kb-glance-specs tr { padding: 11px 16px; }
.kb-glance-photo { padding: 20px; }
@media (max-width: 700px) {
  .kb-glance { padding-top: 36px; }
}


/* v3.6.6: on mobile the stacked glance card stranded a white box (panel bg + packshot
   white canvas) inside the cream card; blend both whites into the cream instead */
@media (max-width: 700px) {
  .kb-glance-photo { background: transparent; }
  .kb-glance-photo img, .content img { mix-blend-mode: multiply; background: transparent; }
}


/* pooja design system: secondary family hovers light grey F7F4F0 across site */
.btn-secondary:hover, .stuck .btn-blue:hover,
.cantfind .btn-blue:hover, .cantfind .btn:hover { background: #F7F4F0; color: #3777C4; }
.btn-ghost:hover { background: #F7F4F0; }


/* pooja type scale: body copy is Lexend at 24 / 18 / 16 / 14 / 12 */
body { font-size: 16px; line-height: 1.5; }


/* hardened image blend: backdrop painted on the direct parent so multiply
   survives iOS stacking contexts, and the tablet band is covered too */
@media (max-width: 900px) {
  .kb-glance-photo { background: var(--cream); }
  .kb-glance-photo img, .content img { mix-blend-mode: multiply; background: transparent; }
}


/* pooja: secondary family font colour is 295891, resting and hover */
.btn-secondary, .stuck .btn-blue, .cantfind .btn-blue, .cantfind .btn { color: #295891; }
.btn-secondary:hover, .stuck .btn-blue:hover,
.cantfind .btn-blue:hover, .cantfind .btn:hover { color: #295891; }


/* pooja heading system: Mikado, letter spacing .5px, sheet line heights,
   desktop to mobile sizes via clamp (H1 50/40, H2 46/36, H3 40/30,
   H4 34/26, H5 24, H6 20) */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.display, .display-2, .art-title, .cat-title, .h2, .h3 {
  font-family: var(--font-display); letter-spacing: .5px;
}
.content h1, .display, .display-2 { font-size: clamp(40px, 4vw, 50px); line-height: 1.2; }
.content h2 { font-size: clamp(36px, 3.6vw, 46px); line-height: 1.1; }
.content h3, .art-title, .cat-title { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.2; }
.content h4 { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.3; }
.content h5, .h2 { font-size: 24px; line-height: 1.3; }
.content h6, .h3 { font-size: 20px; line-height: 1.3; }


/* glance photo: deliberate white mat frame at all widths, so any packshot
   background, white or studio grey with award plates, reads as a framed
   photo instead of an accidental box. Supersedes the blend attempts above. */
.kb-glance-photo {
  background: #fff; border-radius: 10px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
}
.kb-glance-photo img { mix-blend-mode: normal; background: transparent; border-radius: 6px; }


/* article content headings sit at the small end of the scale so they never
   compete with the page title: h2 at the 24 step, deeper heads at 20 */
.content h1, .content h2 { font-size: 24px; line-height: 1.3; }
.content h3, .content h4, .content h5, .content h6 { font-size: 20px; line-height: 1.3; }


/* pooja button tokens, final resting definitions:
   primary  = white bg, #3777C4 font and border
   secondary = #F7F4F0 bg, #295891 font and border */
.btn-blue, .btn-primary {
  background: #FFFFFF; color: #3777C4; border: 2px solid #3777C4;
}
.btn-secondary, .stuck .btn-blue, .cantfind .btn-blue, .cantfind .btn {
  background: #F7F4F0; color: #295891; border: 2px solid #295891;
}


/* pooja button spec, corrected and final: one style, two states.
   default: white, #3777C4 font and border. hover: #F7F4F0, #295891 font and border. */
.btn-blue, .btn-primary, .btn-secondary,
.stuck .btn-blue, .cantfind .btn-blue, .cantfind .btn {
  background: #FFFFFF; color: #3777C4; border: 2px solid #3777C4;
}
.btn-blue:hover, .btn-primary:hover, .btn-secondary:hover,
.stuck .btn-blue:hover, .cantfind .btn-blue:hover, .cantfind .btn:hover {
  background: #F7F4F0; color: #295891; border-color: #295891;
}


/* secondary button states per pooja's sheet: focus ring and disabled */
.btn-secondary:focus-visible, .btn:focus-visible, .btn-blue:focus-visible {
  background: #F7F4F0; color: #295891; border-color: #295891;
  outline: 3px solid #3777C4; outline-offset: 2px;
}
.btn[disabled], .btn-secondary[disabled], .btn-blue[disabled],
.btn[aria-disabled="true"], .vote-btn[disabled] {
  background: #FFFFFF; color: rgba(55, 119, 196, .45);
  border-color: rgba(55, 119, 196, .35); pointer-events: none;
}


/* pagination next and last: secondary button treatment per pooja.
   default #3777C4 font and border on #FFFFFF; hover #295891 on #F7F4F0.
   inner glyph spans inherit so no double pills. */
.pagination { display: flex; gap: 10px; justify-content: center; align-items: center; padding: 12px 0 4px; flex-wrap: wrap; }
.pagination li { list-style: none; }
.pagination li > a, .pagination li > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 20px; border: 2px solid #3777C4; border-radius: 4px;
  background: #FFFFFF; color: #3777C4;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: lowercase; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination li > a:hover { background: #F7F4F0; color: #295891; border-color: #295891; opacity: 1; }
.pagination li.pagination-current > span, .pagination .current {
  background: #F7F4F0; color: #295891; border-color: #295891;
}
.pagination li a span, .pagination li span span {
  border: 0; background: none; padding: 0; min-width: 0; height: auto; color: inherit;
}


/* product hub styles for articles using .jh markup for articles using .jh markup */
.content .jh { display: grid; grid-template-columns: minmax(240px, 40%) 1fr; gap: 34px; align-items: start; margin: 4px 0 10px; }
.content .jh-photo { background: var(--cream); border-radius: var(--radius); padding: 20px; position: sticky; top: 24px; }
.content .jh-photo img { display: block; width: 100%; background: transparent; border-radius: 0; padding: 0; mix-blend-mode: multiply; }
.content .jh-intro { font-size: 18px; line-height: 1.5; margin: 0 0 18px; }
.content .jh-rows { display: grid; gap: 10px; }
.content .jh-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--cream); border-radius: var(--radius); padding: 16px 20px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; transition: background .18s ease, transform .18s ease; }
.content .jh-row:hover { background: #E7E0D6; transform: translateX(3px); }
.content .jh-arrow { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--periwinkle); position: relative; }
.content .jh-arrow::after { content: "\2192"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; }
.content .jh-section { margin-top: 44px; scroll-margin-top: 90px; }
@media (max-width: 800px) {
  .content .jh { grid-template-columns: 1fr; gap: 20px; }
  .content .jh-photo { position: static; }
}