/* ============================================================
Gallipoli Funeral Fund — Design System
"Warm Sanctuary" — dignified, warm, trustworthy
============================================================ */
/* ---------- Fonts ---------- */
/* Loaded via in each page (faster than @import). */
/* ---------- Design Tokens ---------- */
:root {
/* Brand — teal */
--teal-800: #155E64;
--teal-700: #1C7E8C;
--teal-600: #1F97A8;
--teal-500: #34AFBF;
--teal-400: #5BC2CE;
--teal-300: #8AD3DD;
--teal-200: #AEE3EA;
--teal-100: #DCF1F4;
--teal-50: #EEF8FA;
/* Brand — blue (wordmark) */
--blue-800: #143C54;
--blue-700: #1B4D6B;
--blue-600: #2E7DB5;
--blue-500: #4B97CB;
/* Leaf accent palette (tiers + accents) */
--leaf-green: #7FB23C;
--leaf-lime: #A6C84C;
--leaf-gold: #E7C24A;
--leaf-orange: #E0823C;
--leaf-coral: #E0596A;
--leaf-burgundy: #9C4A6B;
/* Warm neutrals */
--cream: #FBF8F2;
--sand: #F4ECDF;
--sand-2: #EFE5D4;
--paper: #FFFFFF;
--line: #E8DECC;
--line-2: #DDD2BC;
/* Ink / text */
--ink: #243842;
--ink-2: #3C4A52;
--muted: #6E675B;
--muted-2:#6F6757;
/* Semantic */
--bg: var(--cream);
--primary: var(--teal-600);
--primary-dark: var(--teal-700);
--heading: var(--blue-800);
/* Type */
--display: 'Lora', Georgia, 'Times New Roman', serif;
--body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing scale */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-9: 6rem; --sp-10: 8rem;
/* Radii */
--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
/* Shadows — soft, warm */
--sh-sm: 0 1px 3px rgba(36,56,66,0.06), 0 1px 2px rgba(36,56,66,0.04);
--sh-md: 0 6px 22px rgba(36,56,66,0.08), 0 2px 6px rgba(36,56,66,0.05);
--sh-lg: 0 18px 50px rgba(27,77,107,0.13), 0 6px 16px rgba(36,56,66,0.07);
--sh-teal: 0 14px 34px rgba(31,151,168,0.28);
/* Layout */
--maxw: 1180px;
--maxw-narrow: 820px;
--nav-h: 76px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* 15px root: refined, more compact type scale. Everything is sized in rem, so
this scales the whole site (all languages + components) down proportionally. */
/* scrollbar-gutter: stable reserves the scrollbar's space at all times, so the
sticky header and the scrolling body share the same content width and align on
the left edge (without it the centered header sits ~half a scrollbar to the
right of the body content). */
html { font-size: 93.75%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:focus-within { scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
font-family: var(--body);
background: var(--bg);
color: var(--ink);
line-height: 1.65;
font-size: 1.0625rem;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-800); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--primary-dark); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
[hidden] { display: none !important; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; border-radius: 4px; }
/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); color: var(--heading); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.15rem, 4.6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; font-weight: 600; }
p { color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--muted); font-weight: 400; }
strong { font-weight: 700; color: var(--ink); }
.eyebrow {
font-family: var(--body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-700);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.eyebrow::before {
content: "";
width: 26px; height: 2px;
background: var(--teal-400);
display: inline-block;
}
.eyebrow.center { justify-content: center; }
/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--maxw-narrow); }
.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-8) 0; }
.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin: 0.7rem 0 1rem; }
.bg-sand { background: var(--sand); }
.bg-paper { background: var(--paper); }
.bg-deep { background: var(--blue-800); color: #EAF3F2; }
.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: #fff; }
.bg-teal-tint { background: var(--teal-50); }
.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
font-family: var(--body); font-weight: 700; font-size: 1rem;
padding: 0.92rem 1.7rem; border-radius: var(--r-pill);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
white-space: nowrap; cursor: pointer; line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: var(--sh-teal); }
.btn-primary:hover { background: #176573; color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31,151,168,0.36); }
.btn-ghost { background: transparent; color: var(--blue-800); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn-ghost:hover { color: var(--blue-800); box-shadow: inset 0 0 0 2px var(--teal-500); transform: translateY(-2px); background: var(--teal-50); }
.btn-white { background: #fff; color: var(--blue-800); box-shadow: var(--sh-md); }
.btn-white:hover { color: var(--teal-700); transform: translateY(-2px); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.08rem; }
.btn-block { width: 100%; }
/* ---------- Header / Nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(251,248,242,0.82);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--sh-sm); background: rgba(251,248,242,0.94); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
/* The logo file (logo-horizontal-trans.png) has ~15% transparent padding baked into
every edge, so although its ![]()
box is aligned with the body content line, the
visible mark sat ~20px to the right of it (the left side the Director flagged).
Pull the logo left by that baked-in left padding so the visible logo lines up with
the hero/body text. The logo is a fixed 58px tall at every breakpoint, so this
offset is constant; it is header-scoped and does not affect the logo anywhere else. */
.nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; margin-left: -20px; }
.nav-logo img { height: 58px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
color: var(--ink-2); font-weight: 600; font-size: 0.96rem;
padding: 0.55rem 0.85rem; border-radius: var(--r-pill);
transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--blue-800); background: var(--teal-50); }
.nav-links a.active { color: var(--teal-700); }
.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
.nav-cta .btn { padding: 0.65rem 1.25rem; font-size: 0.94rem; }
.nav-login { color: var(--blue-800); font-weight: 700; font-size: 0.94rem; padding: 0.55rem 0.6rem; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--blue-800); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem,8vw,6.5rem); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(60% 70% at 82% 18%, rgba(91,194,206,0.20), transparent 70%),
radial-gradient(48% 60% at 8% 88%, rgba(231,194,74,0.14), transparent 70%),
linear-gradient(180deg, var(--teal-50) 0%, var(--cream) 56%);
}
.hero-leaf { position: absolute; right: -120px; top: -70px; width: min(520px, 52vw); opacity: 0.38; transform: rotate(-8deg); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; }
.hero h1 { margin: 1.1rem 0 1.3rem; }
.hero h1 .accent { color: var(--teal-600); font-style: italic; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-trust { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero-trust .ts { display: flex; flex-direction: column; }
.hero-trust .ts b { font-family: var(--display); font-size: 1.5rem; color: var(--blue-700); font-weight: 600; line-height: 1; }
.hero-trust .ts span { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }
/* Hero visual card */
.hero-visual { position: relative; }
.hero-card {
position: relative; background: var(--paper); border-radius: var(--r-xl);
padding: 2rem; box-shadow: var(--sh-lg); border: 1px solid var(--line);
overflow: hidden;
}
.hero-card .leaf-mark { position: absolute; right: -40px; bottom: -40px; width: 180px; opacity: 0.14; }
.hero-card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.hero-quote { font-family: var(--display); font-style: italic; font-size: 1.16rem; color: var(--blue-700); line-height: 1.45; }
.hero-quote .src { display: block; font-style: normal; font-family: var(--body); font-size: 0.82rem; color: var(--muted); margin-top: 0.7rem; font-weight: 600; letter-spacing: 0.04em; }
.hero-card .mini-benefit { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; background: var(--teal-50); border-radius: var(--r-md); }
.hero-card .mini-benefit .amt { font-family: var(--display); font-size: 2.2rem; color: var(--teal-800); font-weight: 600; line-height: 1; }
.hero-card .mini-benefit .lbl { font-size: 0.86rem; color: var(--muted); }
.hero-card-photo { width: calc(100% + 4rem); height: 168px; object-fit: cover; object-position: center 48%; margin: -2rem -2rem 1.4rem; }
/* body links darkened to var(--teal-800) for WCAG AA on cream/sand; keep links light on dark sections */
.bg-deep a:not(.btn), .video-feature a:not(.btn), .calc-result a:not(.btn) { color: var(--teal-200); }
/* ---------- Cards ---------- */
.card {
background: var(--paper); border-radius: var(--r-lg); padding: 2rem;
border: 1px solid var(--line); box-shadow: var(--sh-sm);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card.hoverable:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--teal-200); }
.card-icon {
width: 56px; height: 56px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
margin-bottom: 1.2rem; background: var(--teal-50); color: var(--teal-700);
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 0.6rem; font-size: 1.3rem; }
.card p { font-size: 1rem; }
/* Feature icon colour variants */
.ic-green { background: #EEF6E0; color: var(--leaf-green); }
.ic-gold { background: #FBF2D4; color: #B8932A; }
.ic-orange { background: #FBEADB; color: var(--leaf-orange); }
.ic-coral { background: #FBE2E5; color: var(--leaf-coral); }
.ic-burgundy { background: #F4E2EA; color: var(--leaf-burgundy); }
.ic-blue { background: #E2EEF7; color: var(--blue-600); }
/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step { position: relative; padding-left: 4.5rem; }
.step::before {
counter-increment: step; content: counter(step);
position: absolute; left: 0; top: 0;
width: 52px; height: 52px; border-radius: 50%;
background: var(--paper); border: 2px solid var(--teal-300); color: var(--teal-700);
font-family: var(--display); font-size: 1.4rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.step h4 { margin-bottom: 0.3rem; }
/* ---------- Tier cards ---------- */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: start; }
.tier {
position: relative; background: var(--paper); border-radius: var(--r-lg);
border: 1px solid var(--line); padding: 2rem 1.8rem; overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.tier .tier-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.tier-1 .tier-bar { background: linear-gradient(90deg, var(--teal-500), var(--leaf-green)); }
.tier-2 .tier-bar { background: linear-gradient(90deg, var(--blue-600), var(--leaf-gold)); }
.tier-3 .tier-bar { background: linear-gradient(90deg, var(--leaf-burgundy), var(--leaf-coral)); }
.tier.featured { border-color: var(--teal-300); box-shadow: var(--sh-md); }
.tier .badge-pop {
position: absolute; top: 1.3rem; right: 1.3rem; font-size: 0.72rem; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-700);
background: var(--teal-50); padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
}
.tier .tier-name { font-family: var(--display); font-size: 1.5rem; color: var(--blue-800); margin: 0.6rem 0 0.2rem; }
.tier .tier-sub { font-size: 0.9rem; color: var(--muted); min-height: 2.6em; }
.tier .tier-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.1rem 0 1.3rem; }
.tier .tier-amount { display: flex; flex-direction: column; gap: 0.3rem; }
.tier .tier-amount + .tier-amount { padding-inline-start: 0.9rem; border-inline-start: 1px solid var(--line); }
.tier .ta-fig { font-family: var(--display); font-size: 2.05rem; font-weight: 600; color: var(--teal-700); line-height: 1; }
.tier .ta-lbl { font-size: 0.72rem; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tier ul.tier-feats { display: grid; gap: 0.6rem; margin: 1.2rem 0; }
.tier ul.tier-feats li { display: flex; gap: 0.6rem; font-size: 0.96rem; color: var(--ink-2); }
.tier ul.tier-feats li svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--teal-500); margin-top: 2px; }
/* ---------- Calculator ---------- */
.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--line); background: var(--paper); }
.calc-form { padding: 2.6rem; }
.calc-result { padding: 2.6rem; background: linear-gradient(165deg, var(--blue-800), #0F2C3E); color: #EAF3F2; position: relative; overflow: hidden; }
.calc-result .leaf-mark { position: absolute; right: -50px; top: -50px; width: 230px; opacity: 0.12; }
.calc-field { margin-bottom: 1.7rem; }
.calc-field > label { display: block; font-weight: 700; color: var(--blue-800); margin-bottom: 0.7rem; font-size: 0.98rem; }
.seg { display: flex; gap: 0.5rem; background: var(--sand); padding: 5px; border-radius: var(--r-pill); }
.seg button { flex: 1; padding: 0.7rem 0.5rem; border-radius: var(--r-pill); font-weight: 700; color: var(--muted); font-size: 0.95rem; transition: all .2s var(--ease); }
.seg button.active { background: #fff; color: var(--teal-700); box-shadow: var(--sh-sm); }
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.opt {
padding: 0.7rem 0.4rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-2);
background: var(--paper); color: var(--ink-2); font-weight: 600; font-size: 0.9rem; text-align: center;
transition: all .18s var(--ease);
}
.opt:hover { border-color: var(--teal-300); }
.opt.active { border-color: var(--teal-500); background: var(--teal-50); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-500); }
.tier-opt { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 0.6rem; }
.tier-opt b { font-size: 0.96rem; }
.tier-opt span { font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.tier-opt.active span { color: var(--teal-700); }
.result-label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-200); font-weight: 700; }
.result-benefit { font-family: var(--display); font-size: clamp(2.4rem, 5.2vw, 3.3rem); font-weight: 600; color: #fff; line-height: 1; margin: 0.5rem 0 0.2rem; }
.result-benefit-sub { color: var(--teal-200); font-size: 0.95rem; }
.result-divider { height: 1px; background: rgba(255,255,255,0.16); margin: 1.8rem 0; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0; }
.result-row .k { color: #B9D6DC; font-size: 0.98rem; }
.result-row .v { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: #fff; }
.result-row .v small { font-family: var(--body); font-size: 0.8rem; color: var(--teal-200); font-weight: 600; }
.result-note { font-size: 0.82rem; color: #E3F1F4; margin-top: 1.4rem; line-height: 1.5; }
.result-cta { margin-top: 1.8rem; }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-sm); -webkit-overflow-scrolling: touch; }
table.fee-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--paper); min-width: 270px; }
table.fee-table th, table.fee-table td { white-space: nowrap; }
table.fee-table caption { caption-side: top; text-align: left; font-family: var(--display); font-size: 1.2rem; color: var(--blue-800); padding: 1.1rem 1.2rem 0.4rem; }
table.fee-table th, table.fee-table td { padding: 0.8rem 1.1rem; text-align: left; }
table.fee-table thead th { background: var(--blue-800); color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; position: sticky; top: 0; }
table.fee-table thead th:first-child { border-top-left-radius: 0; }
table.fee-table tbody tr { border-top: 1px solid var(--line); }
table.fee-table tbody tr:nth-child(even) { background: var(--cream); }
table.fee-table tbody tr:hover { background: var(--teal-50); }
table.fee-table td.num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blue-700); }
table.fee-table td.free { color: #4d7c1a; font-weight: 700; }
/* ---------- Accordion (FAQ) ---------- */
.accordion { display: grid; gap: 0.8rem; }
.acc-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.acc-item[open] { box-shadow: var(--sh-md); border-color: var(--teal-200); }
.acc-item summary { list-style: none; cursor: pointer; padding: 1.3rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--blue-800); }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary .chev { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease), background .25s; font-size: 1.1rem; }
.acc-item[open] summary .chev { transform: rotate(45deg); background: var(--teal-500); color: #fff; }
.acc-body { padding: 0 1.5rem 1.4rem; color: var(--ink-2); }
.acc-body p + p { margin-top: 0.8rem; }
/* ---------- Disclosure / Risk box ---------- */
.notice { display: flex; gap: 1rem; padding: 1.4rem 1.5rem; border-radius: var(--r-md); background: #FBF2D4; border: 1px solid #EAD79A; }
.notice svg { flex-shrink: 0; width: 26px; height: 26px; color: #B8932A; margin-top: 2px; }
.notice h4 { color: #87691B; margin-bottom: 0.3rem; }
.notice p { color: #6E5618; font-size: 0.95rem; }
.notice.teal { background: var(--teal-50); border-color: var(--teal-200); }
.notice.teal svg { color: var(--teal-700); }
.notice.teal h4 { color: var(--teal-700); }
.notice.teal p { color: var(--ink-2); }
/* ---------- Pills / chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--sh-sm); }
.chip svg { width: 16px; height: 16px; color: var(--teal-600); }
/* ---------- Split media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); object-fit: cover; }
.split-media .float-badge {
position: absolute; bottom: -22px; left: -22px; background: var(--paper);
border-radius: var(--r-md); padding: 1rem 1.3rem; box-shadow: var(--sh-lg); display: flex; gap: 0.8rem; align-items: center; border: 1px solid var(--line);
}
.split-media .float-badge .amt { font-family: var(--display); font-size: 1.7rem; color: var(--teal-700); font-weight: 600; line-height: 1; }
.split-media .float-badge .lbl { font-size: 0.8rem; color: var(--muted); max-width: 120px; }
/* ---------- Stat band ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; align-items: start; }
.stat { text-align: center; }
/* Values are sized to stay on a single line (so "Not-for-profit" never wraps),
which keeps both the value row and the caption row aligned across all columns. */
.stat b { display: block; white-space: nowrap; font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.3rem); color: #fff; font-weight: 600; line-height: 1.1; }
.stat span { color: var(--teal-200); font-size: 0.92rem; margin-top: 0.5rem; display: block; }
/* ---------- CTA band ---------- */
.cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(2.5rem,5vw,4.5rem); overflow: hidden; background: linear-gradient(135deg, var(--teal-600), var(--teal-700) 55%, var(--blue-700)); color: #fff; text-align: center; }
.cta-band .leaf-mark { position: absolute; opacity: 0.16; }
.cta-band .leaf-mark.l1 { right: -60px; top: -60px; width: 280px; }
.cta-band .leaf-mark.l2 { left: -70px; bottom: -70px; width: 240px; transform: rotate(140deg); }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: rgba(255,255,255,0.9); position: relative; max-width: 560px; margin: 1rem auto 0; }
.cta-band .hero-actions { justify-content: center; position: relative; }
/* ---------- Story video feature ---------- */
.video-feature { position: relative; overflow: hidden; }
.video-feature .leaf-mark { position: absolute; opacity: 0.10; pointer-events: none; }
.video-feature .leaf-mark.l1 { right: -70px; top: -70px; width: 300px; }
.video-feature .leaf-mark.l2 { left: -80px; bottom: -90px; width: 260px; transform: rotate(140deg); }
.video-feature .section-head { position: relative; }
.video-feature .eyebrow { color: var(--teal-300); }
.video-feature .lead { color: rgba(255,255,255,0.82); }
.video-frame {
position: relative; max-width: 960px; margin: 0 auto;
border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--sh-lg); border: 1px solid rgba(255,255,255,0.12);
background: #000; aspect-ratio: 16 / 9;
}
.video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-frame .video-play {
position: absolute; inset: 0; margin: auto;
width: 88px; height: 88px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(31,151,168,0.92); color: #fff;
box-shadow: 0 12px 34px rgba(0,0,0,0.35);
transition: transform .25s var(--ease), background .25s var(--ease), opacity .3s var(--ease);
}
.video-frame .video-play svg { width: 36px; height: 36px; fill: currentColor; margin-left: 4px; }
.video-frame .video-play:hover { transform: scale(1.07); background: var(--teal-700); }
.video-frame.playing .video-play { opacity: 0; pointer-events: none; }
.video-fallback { color: #fff; padding: 1.5rem; text-align: center; }
.video-fallback a { color: var(--teal-200); text-decoration: underline; }
.video-note { position: relative; text-align: center; color: rgba(255,255,255,0.62); font-size: 0.85rem; margin-top: 1.3rem; letter-spacing: 0.01em; }
/* ---------- Member / board grid ---------- */
.people { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.person { text-align: center; }
.person .avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; background: linear-gradient(150deg, var(--teal-400), var(--blue-600)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-size: 2rem; font-weight: 600; box-shadow: var(--sh-md); }
.person h4 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.person span { font-size: 0.88rem; color: var(--muted); }
/* ---------- Board of directors (with photos + bios) ---------- */
.people.directors { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.directors .person { text-align: left; }
.director-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; border-radius: var(--r-md); box-shadow: var(--sh-md); margin-bottom: 1.1rem; background: var(--teal-50); }
.directors .person h4 { font-size: 1.12rem; margin-bottom: 0.2rem; }
.directors .person h4 .post-nom { font-size: 0.62em; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.directors .person > span { display: block; color: var(--teal-700); font-weight: 700; font-size: 0.85rem; }
.director-bio { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-top: 0.7rem; }
@media (max-width: 900px) { .people.directors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .people.directors { grid-template-columns: 1fr; } }
/* ---------- Footer ---------- */
.site-footer { background: var(--blue-800); color: #C5D6DC; padding: var(--sp-8) 0 2rem; position: relative; overflow: hidden; }
.site-footer .leaf-mark { position: absolute; right: -80px; top: -60px; width: 340px; opacity: 0.07; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; position: relative; z-index: 1; }
.footer-brand img { height: 62px; width: auto; margin-bottom: 1.1rem; background: #fff; padding: 0.8rem 1.1rem; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.footer-brand p { color: #9FB6BE; font-size: 0.92rem; max-width: 320px; }
.footer-col h5 { color: #fff; font-family: var(--body); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a { color: #B6CBD2; font-size: 0.95rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 0.6rem; font-size: 0.95rem; color: #B6CBD2; margin-bottom: 0.7rem; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--teal-400); flex-shrink: 0; margin-top: 3px; }
.footer-legal { margin-top: var(--sp-7); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.footer-legal p { color: #8FA8B0; font-size: 0.84rem; line-height: 1.6; max-width: 720px; }
.footer-legal .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-legal .links a { color: #B6CBD2; font-size: 0.84rem; }
/* ---------- Page hero (interior pages) ---------- */
.page-hero { position: relative; padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); overflow: hidden; background: linear-gradient(180deg, var(--teal-50), var(--cream)); }
.page-hero::after { content:""; position:absolute; right:-120px; top:-80px; width:420px; height:420px; background: radial-gradient(circle, rgba(91,194,206,0.18), transparent 65%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin: 0.8rem 0 1rem; max-width: 16ch; }
.page-hero .lead { max-width: 60ch; }
.breadcrumb { font-size: 0.86rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal-700); }
/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 0.9rem; }
.prose h3 { font-size: 1.25rem; margin: 1.8rem 0 0.6rem; }
.prose p, .prose li { color: var(--ink-2); margin-bottom: 0.9rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: 0.5rem; }
.prose a { text-decoration: underline; }
.prose .meta { color: var(--muted); font-size: 0.9rem; }
/* ---------- Contact ---------- */
.form-grid { display: grid; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label { display: block; font-weight: 700; color: var(--blue-800); margin-bottom: 0.4rem; font-size: 0.92rem; }
.field input, .field select, .field textarea {
width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--line-2);
border-radius: var(--r-sm); background: var(--paper); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); outline: none; }
.field textarea { resize: vertical; min-height: 130px; }
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.maxw-prose { max-width: 60ch; }
/* ---------- Reveal animation (progressive enhancement) ----------
Content is visible by default. Only when JS adds .js to do we
hide-then-reveal, so the site degrades gracefully without JavaScript. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.hero-visual { max-width: 480px; }
.grid-4 { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.stat-band { grid-template-columns: repeat(2,1fr); gap: 2rem; }
.people { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
/* On mobile the nav CTAs live in the slide-in menu. Hide ALL inline .nav-cta buttons
(not just the ghost one) so the primary "Apply now" button can't overflow the header
on narrow phones (<=400px) and clip the hamburger toggle - only the toggle remains. */
.nav-links, .nav-cta .btn, .nav-login { display: none; }
.nav-toggle { display: flex; }
.mobile-menu { display: block; }
/* Prevent iOS Safari from auto-zooming the page when a field is focused: form controls
must be >=16px on touch devices (the base size is 15px). Applies site-wide on mobile. */
input, select, textarea { font-size: 16px; }
.calc-wrap { grid-template-columns: 1fr; }
.split, .grid-2, .grid-3, .tiers { grid-template-columns: 1fr; gap: 2rem; }
.split.reverse .split-media { order: 0; }
.split-media .float-badge { left: 1rem; bottom: -22px; }
.section { padding: var(--sp-8) 0; }
}
@media (max-width: 560px) {
.grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.stat-band { grid-template-columns: 1fr 1fr; }
.people { grid-template-columns: 1fr 1fr; }
.form-row { grid-template-columns: 1fr; }
.opt-grid { grid-template-columns: 1fr; }
.hero-actions .btn { width: 100%; }
.hero-trust { flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; }
.hero-trust .ts { align-items: center; }
.container { padding: 0 1.2rem; }
}
/* ---------- Mobile menu ---------- */
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0; background: var(--cream); z-index: 99; transform: translateX(100%); transition: transform .35s var(--ease); padding: 2rem 1.5rem; overflow-y: auto; visibility: hidden; }
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu a { display: block; padding: 1rem 0.5rem; font-family: var(--display); font-size: 1.4rem; color: var(--blue-800); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 1.5rem; width: 100%; border-bottom: none; }
.mobile-menu a.btn-primary { color: #fff; }
.mobile-menu a.btn-ghost { color: var(--blue-800); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.js .reveal, html.js .reveal.in { opacity: 1 !important; transform: none !important; }
}
/* ---------- Language switch (EN / TR) ---------- */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; margin-right: 0.55rem; flex: none; }
.lang-switch button { padding: 0.34rem 0.62rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em; color: var(--muted); background: transparent; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); }
.lang-switch button:hover { color: var(--blue-800); }
.lang-switch button.on { background: var(--teal-600); color: #fff; }
@media (max-width: 980px) { .lang-switch { margin-right: 0.35rem; } }
.lang-switch [lang="ar"] { font-size: 0.95rem; padding: 0.2rem 0.55rem; }
/* ---------- Arabic / RTL ---------- */
/* Noto Naskh Arabic carries a larger apparent size than Mulish; the global
scale reduction already brings Arabic down with everything else, so here we
only relax the line spacing a touch for Arabic legibility. */
html[dir="rtl"] body { font-family: 'Noto Naskh Arabic', 'Mulish', -apple-system, sans-serif; line-height: 1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5,
html[dir="rtl"] .hero-quote { font-family: 'Amiri', 'Lora', Georgia, serif; letter-spacing: normal; }
html[dir="rtl"] .eyebrow { letter-spacing: normal; text-transform: none; }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .lang-switch { direction: ltr; }
html[dir="rtl"] .ta-fig, html[dir="rtl"] .mini-benefit .amt, html[dir="rtl"] .result-benefit, html[dir="rtl"] .result-row .v { direction: ltr; }
/* ============================================================
"Keeps pace" — benefit vs rising funeral cost (homepage)
============================================================ */
.keeppace { position: relative; overflow: hidden; }
.keeppace .eyebrow.center { color: var(--teal-700); }
.kp-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--sh-lg);
padding: clamp(1.4rem, 3vw, 2.6rem);
max-width: 1040px;
margin: 0 auto;
}
/* --- Controls --- */
.kp-controls { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-bottom: 1.6rem; }
.kp-group { display: flex; flex-direction: column; gap: 0.5rem; }
.kp-group > .kp-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }
.kp-seg { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.kp-btn {
appearance: none; cursor: pointer; border: 1px solid var(--line-2);
background: var(--cream); color: var(--ink-2);
border-radius: var(--r-pill); padding: 0.5rem 0.95rem;
font-family: var(--body); font-size: 0.9rem; font-weight: 700; line-height: 1.1;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.kp-btn small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--muted-2); margin-top: 0.18rem; }
.kp-btn:hover { border-color: var(--teal-400); transform: translateY(-1px); }
.kp-btn.active { background: var(--teal-700); border-color: var(--teal-700); color: #fff; box-shadow: var(--sh-teal); }
.kp-btn.active small { color: rgba(255,255,255,0.82); }
/* --- Chart --- */
.kp-chartwrap { position: relative; margin: 0.4rem 0 0.2rem; }
.kp-chart { display: block; width: 100%; height: auto; }
.kp-chart text { font-family: var(--body); fill: var(--muted); }
.kp-chart .kp-axis text { font-size: 13px; }
.kp-chart .kp-axis-cap { font-size: 12px; fill: var(--muted-2); }
.kp-chart .kp-grid { stroke: var(--line); stroke-width: 1; }
.kp-chart .kp-gap { fill: rgba(224,89,106,0.13); }
.kp-chart .kp-line-cost { fill: none; stroke: var(--leaf-coral); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.kp-chart .kp-line-benefit { fill: none; stroke: var(--teal-600); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.kp-chart .kp-line-frozen { fill: none; stroke: var(--muted-2); stroke-width: 2.4; stroke-dasharray: 6 6; stroke-linecap: round; }
.kp-chart .kp-guide { stroke: var(--blue-700); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0.55; }
.kp-chart .kp-dot-cost { fill: var(--leaf-coral); }
.kp-chart .kp-dot-benefit { fill: var(--teal-600); stroke: #fff; stroke-width: 2.5; }
.kp-chart .kp-dot-frozen { fill: var(--muted-2); }
/* draw-in animation */
.kp-chart .kp-anim { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.kp-chart.drawn .kp-anim { transition: stroke-dashoffset 1.5s var(--ease); stroke-dashoffset: 0; }
.kp-chart .kp-gap, .kp-chart .kp-guide, .kp-chart .kp-marker { opacity: 0; }
.kp-chart.drawn .kp-gap { transition: opacity .6s var(--ease) .9s; opacity: 1; }
.kp-chart.drawn .kp-guide { transition: opacity .6s var(--ease) 1.1s; opacity: 0.55; }
.kp-chart.drawn .kp-marker { transition: opacity .6s var(--ease) 1.2s; opacity: 1; }
/* --- Legend --- */
.kp-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.6rem 0 0.2rem; }
.kp-legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--ink-2); font-weight: 600; }
.kp-legend i { width: 22px; border-top: 3px solid currentColor; border-radius: 2px; }
.kp-legend .lg-cost { color: var(--leaf-coral); } .kp-legend .lg-cost i { border-top-width: 6px; opacity: 0.55; }
.kp-legend .lg-benefit { color: var(--teal-600); }
.kp-legend .lg-frozen { color: var(--muted-2); } .kp-legend .lg-frozen i { border-top-style: dashed; }
/* --- Readout --- */
.kp-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.kp-stat { border-radius: var(--r-md); padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: var(--cream); }
.kp-stat .kp-stat-lbl { font-size: 0.82rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 0.45rem; }
.kp-stat .kp-stat-lbl::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.kp-stat .kp-stat-fig { font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 600; line-height: 1.05; margin-top: 0.35rem; }
.kp-stat .kp-stat-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.kp-stat.is-cost { color: var(--leaf-coral); } .kp-stat.is-cost .kp-stat-fig { color: var(--leaf-coral); }
.kp-stat.is-benefit { color: var(--teal-700); background: var(--teal-50); border-color: var(--teal-200); }
.kp-stat.is-benefit .kp-stat-fig { color: var(--teal-700); }
.kp-stat.is-gap { color: var(--muted-2); } .kp-stat.is-gap .kp-stat-fig { color: var(--ink); }
.kp-stat .kp-stat-lbl, .kp-stat .kp-stat-fig, .kp-stat .kp-stat-note { direction: ltr; }
.kp-fine { font-size: 0.82rem; color: var(--muted); margin-top: 1.3rem; line-height: 1.6; }
.kp-fine strong { color: var(--ink-2); font-weight: 700; }
@media (max-width: 760px) {
.kp-readout { grid-template-columns: 1fr; }
.kp-controls { gap: 1.2rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.kp-chart .kp-anim { stroke-dashoffset: 0 !important; transition: none !important; }
.kp-chart .kp-gap, .kp-chart .kp-guide, .kp-chart .kp-marker { opacity: 1 !important; transition: none !important; }
.kp-chart .kp-guide { opacity: 0.55 !important; }
}
html[dir="rtl"] .kp-chart { direction: ltr; }
/* ---------- Keeps pace (simplified, replaces projection chart) ---------- */
.kp2 { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items:center; }
.kp2 > * { min-width: 0; }
.kp2-copy h2 { margin: 0.9rem 0 1.2rem; }
.kp2-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 2.6rem 2rem; text-align:center; }
.kp2-card-label { display:block; font-weight:700; letter-spacing:.07em; text-transform:uppercase; font-size:0.78rem; color: var(--muted); margin-bottom: 1.8rem; }
.kp2-figs { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 1rem 1.4rem; }
.kp2-fig { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.kp2-fig-amt { font-family: var(--display); font-weight:600; line-height:1; }
.kp2-fig-amt.then { font-size: 2rem; color: var(--muted); }
.kp2-fig-amt.now { font-size: 3.2rem; color: var(--teal-800); }
.kp2-fig-year { font-size:0.85rem; font-weight:600; color: var(--muted); letter-spacing:.04em; }
.kp2-arrow { width:48px; height:32px; color: var(--teal-500); flex:none; }
.kp2-badge { display:inline-block; margin-top:1.8rem; background: var(--teal-50); color: var(--teal-700); font-weight:700; font-size:0.9rem; padding:0.5rem 1.1rem; border-radius: var(--r-pill); }
.kp2-fine { margin-top:1.4rem; font-size:0.8rem; color: var(--muted); line-height:1.5; }
.kp2-fine a { text-decoration: underline; color: var(--teal-800); }
@media (max-width: 860px) { .kp2 { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (max-width: 520px) { .kp2-figs { gap: 1rem; } .kp2-fig-amt.now { font-size: 2.1rem; } .kp2-fig-amt.then { font-size: 1.5rem; } .kp2-arrow { width: 34px; } .kp2-card { padding: 2rem 1.1rem; } }