/* =====================================================================
   atidesign.co.uk — the only stylesheet of the site.

   1. Colours ............ change a colour once here, it changes everywhere
   2. Base + text
   3. Header / menu
   4. Blocks, bands, buttons, images
   5. Layout helpers ..... start-N span-N (24-column grid), mt-N (space above, N x 8px)
   6. Page themes ........ fonts and text sizes per project (body class="theme-…")
   7. Mobile
   ===================================================================== */

/* ---------- 1. Colours ---------- */
:root {
  --purple: rgb(94, 39, 80);
  --plum: rgb(80, 25, 65);
  --cream: rgb(237, 234, 230);
  --green: rgb(81, 106, 91);
  --blue: rgb(24, 5, 217);
  --gold: rgb(195, 151, 84);
  --taupe: rgb(126, 112, 95);
  --olive: rgb(96, 115, 93);
  --sage: rgb(119, 145, 119);
  --sand: rgb(238, 231, 218);
  --ice: rgb(227, 240, 255);
  --navy: rgb(41, 49, 69);
  --white: rgb(255, 255, 255);
  --honey: rgba(194, 150, 83, 0.34);
  --honey-light: rgba(194, 150, 83, 0.13);
  --slate: rgba(41, 49, 69, 0.76);
  --brick: rgba(115, 59, 48, 0.88);
  --ink: rgb(0, 0, 0);
  --header-bg: var(--cream);
  --nav: var(--green);
  --nav-hover: var(--plum);
  --page-width: 1224px;
}
.c-purple { color: var(--purple); }  .bg-purple { background-color: var(--purple); }
.c-plum { color: var(--plum); }  .bg-plum { background-color: var(--plum); }
.c-cream { color: var(--cream); }  .bg-cream { background-color: var(--cream); }
.c-green { color: var(--green); }  .bg-green { background-color: var(--green); }
.c-blue { color: var(--blue); }  .bg-blue { background-color: var(--blue); }
.c-gold { color: var(--gold); }  .bg-gold { background-color: var(--gold); }
.c-taupe { color: var(--taupe); }  .bg-taupe { background-color: var(--taupe); }
.c-olive { color: var(--olive); }  .bg-olive { background-color: var(--olive); }
.c-sage { color: var(--sage); }  .bg-sage { background-color: var(--sage); }
.c-sand { color: var(--sand); }  .bg-sand { background-color: var(--sand); }
.c-ice { color: var(--ice); }  .bg-ice { background-color: var(--ice); }
.c-navy { color: var(--navy); }  .bg-navy { background-color: var(--navy); }
.c-white { color: var(--white); }  .bg-white { background-color: var(--white); }
.c-honey { color: var(--honey); }  .bg-honey { background-color: var(--honey); }
.c-honey-light { color: var(--honey-light); }  .bg-honey-light { background-color: var(--honey-light); }
.c-slate { color: var(--slate); }  .bg-slate { background-color: var(--slate); }
.c-brick { color: var(--brick); }  .bg-brick { background-color: var(--brick); }
.c-ink { color: var(--ink); }  .bg-ink { background-color: var(--ink); }

/* ---------- 2. Base + text ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; font-family: var(--font); overflow-wrap: break-word; }
ul, ol { padding-left: 1.4em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.regular { font-weight: 400; } .medium { font-weight: 500; } .bold { font-weight: 700; } .black { font-weight: 900; }
.tight { line-height: 1.3; } .relaxed { line-height: 1.45; } .loose { line-height: 1.8; }
.size-24 { font-size: 24px; }
.size-28 { font-size: 28px; }
.size-48 { font-size: 48px; }

/* ---------- 3. Header / menu ---------- */
.site-header { background: var(--header-bg); position: relative; z-index: 10; }
.site-header__inner { max-width: 1240px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo img { width: 128px; height: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 38px; align-items: center; }
.nav a { font-family: Georgia, serif; font-size: 22px; line-height: 1.5; color: var(--nav); text-decoration: none; }
.nav a:hover { color: var(--nav-hover); }
.nav a.active { color: var(--nav-hover); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.has-dropdown { position: relative; display: flex; align-items: center; }
.dropdown-toggle { background: none; border: 0; padding: 0 0 0 8px; color: var(--nav); cursor: pointer; display: flex; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; }
.dropdown::before { content: ""; position: absolute; inset: 8px 0 0; background: var(--header-bg); border-radius: 5px; box-shadow: 0 6px 14px #0000001a; z-index: -1; }
.nav .dropdown { padding: 24px 24px 16px; white-space: nowrap; }
.dropdown li + li { margin-top: 8px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.burger { display: none; }

/* ---------- 4. Blocks, bands, buttons, images ---------- */
main { overflow: hidden; }
.block { position: relative; padding-top: calc(var(--pt, 0) * 8px); padding-bottom: calc(var(--pb, 0) * 8px); }
.inner { --cols: 24; position: relative; max-width: var(--page-width); margin: 0 auto; }
.block-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* Band = coloured strip with a centred title between sections */
.band { padding: 12px 16px; text-align: center; }

/* Buttons (colours per project are in section 6) */
.button { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 26px;
  font-family: var(--font); font-size: 18px; font-weight: 400; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--btn-border); border-radius: 8px;
  transition: background-color .2s, color .2s, border-color .2s; }
.button:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); border-color: var(--btn-hover-border); }
.button--pill { --btn-bg: rgb(153, 111, 96); --btn-text: #fff; --btn-border: rgb(153, 111, 96); --btn-hover-bg: rgb(153, 111, 96); --btn-hover-text: #fff; --btn-hover-border: rgb(153, 111, 96);
  border-radius: 30px; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; }

/* Images */
.rounded { border-radius: 20px; }
.rounded-sm { border-radius: 12px; }
.img-link { display: block; }
.shape-flower { -webkit-mask: url(/images/shape-flower.svg) center / 100% 100% no-repeat; mask: url(/images/shape-flower.svg) center / 100% 100% no-repeat; }
.shape { height: calc(var(--h, 0) * 1cqw); }
.line { height: 10px; border: 0; margin-bottom: 0; background: linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat; }
.vline { width: 0; justify-self: center; height: calc(var(--h, 0) * 1cqw); border-left: 4px solid currentColor; }
.vline.dashed { border-left-style: dashed; }
.social { display: flex; gap: 16px; align-items: center; }
.social a { display: flex; color: var(--purple); }
.social svg { width: 24px; height: 24px; }
.email-me .button { width: fit-content; margin: 16px 0; }

/* ---------- 5. Layout helpers ----------
   Every block is 24 columns wide.  start-N = column where the item starts,
   span-N = how many columns it takes.  mt-N = space above (N x 8px).
   .row puts its children side by side; .col stacks them; .stack layers them (top-N = offset). */
:where(.inner) * { --s: 1; --n: var(--cols); --mt: 0; --top: 0; }
.inner > *, .col > * { margin-left: calc((var(--s, 1) - 1) / var(--cols) * 100%); margin-top: calc(var(--mt, 0) * 8px); }
.inner > :not(img, .img-link), .col > :not(img, .img-link) { width: calc(var(--n, var(--cols)) / var(--cols) * 100%); }
/* images keep the size written in their width/height attributes (never stretched) */
.row > img, .row > .img-link, .stack > img { justify-self: center; }
.img-link { width: fit-content; }
.row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: start; }
.row > * { grid-row: 1; grid-column: var(--s, 1) / span var(--n, var(--cols)); margin-top: calc(var(--mt, 0) * 8px); }
.col { --cols: var(--n); }
.stack { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); container-type: inline-size; align-items: start; }
.stack > * { grid-row: 1; grid-column: var(--s, 1) / span var(--n, 1); margin-top: calc(var(--top, 0) * 1cqw); }
.inner > .centered, .col > .centered { margin-left: auto; margin-right: auto; }
.inner > .centered:not(img, .img-link), .col > .centered:not(img, .img-link) { width: fit-content; max-width: 100%; }
/* buttons are as wide as their label */
.inner > .button, .col > .button { width: fit-content; }
.row > .button, .stack > .button { width: fit-content; justify-self: start; }
.start-1{--s:1} .start-2{--s:2} .start-3{--s:3} .start-4{--s:4} .start-5{--s:5} .start-6{--s:6} .start-7{--s:7} .start-8{--s:8} .start-9{--s:9} .start-10{--s:10} .start-11{--s:11} .start-12{--s:12}
.start-13{--s:13} .start-14{--s:14} .start-15{--s:15} .start-16{--s:16} .start-17{--s:17} .start-18{--s:18} .start-19{--s:19} .start-20{--s:20} .start-21{--s:21} .start-22{--s:22} .start-23{--s:23} .start-24{--s:24}
.span-1{--n:1} .span-2{--n:2} .span-3{--n:3} .span-4{--n:4} .span-5{--n:5} .span-6{--n:6} .span-7{--n:7} .span-8{--n:8} .span-9{--n:9} .span-10{--n:10} .span-11{--n:11} .span-12{--n:12}
.span-13{--n:13} .span-14{--n:14} .span-15{--n:15} .span-16{--n:16} .span-17{--n:17} .span-18{--n:18} .span-19{--n:19} .span-20{--n:20} .span-21{--n:21} .span-22{--n:22} .span-23{--n:23} .span-24{--n:24}
.mt-0{--mt:0} .mt-1{--mt:1} .mt-2{--mt:2} .mt-3{--mt:3} .mt-4{--mt:4} .mt-5{--mt:5} .mt-6{--mt:6} .mt-7{--mt:7} .mt-8{--mt:8} .mt-9{--mt:9} .mt-10{--mt:10} .mt-11{--mt:11}
.mt-12{--mt:12} .mt-13{--mt:13} .mt-14{--mt:14} .mt-15{--mt:15} .mt-16{--mt:16} .mt-17{--mt:17} .mt-18{--mt:18} .mt-19{--mt:19} .mt-20{--mt:20} .mt-21{--mt:21} .mt-22{--mt:22} .mt-23{--mt:23}
.mt-24{--mt:24} .mt-25{--mt:25} .mt-26{--mt:26} .mt-27{--mt:27} .mt-28{--mt:28} .mt-29{--mt:29} .mt-30{--mt:30} .mt-31{--mt:31} .mt-32{--mt:32} .mt-33{--mt:33} .mt-34{--mt:34} .mt-35{--mt:35}
.mt-36{--mt:36} .mt-37{--mt:37} .mt-38{--mt:38} .mt-39{--mt:39} .mt-40{--mt:40} .mt-41{--mt:41} .mt-42{--mt:42} .mt-43{--mt:43} .mt-44{--mt:44} .mt-45{--mt:45} .mt-46{--mt:46} .mt-47{--mt:47}
.mt-48{--mt:48} .mt-49{--mt:49} .mt-50{--mt:50} .mt-51{--mt:51} .mt-52{--mt:52} .mt-53{--mt:53} .mt-54{--mt:54} .mt-55{--mt:55} .mt-56{--mt:56} .mt-57{--mt:57} .mt-58{--mt:58} .mt-59{--mt:59}
.mt-60{--mt:60} .mt-61{--mt:61} .mt-62{--mt:62} .mt-63{--mt:63} .mt-64{--mt:64} .mt-65{--mt:65} .mt-66{--mt:66} .mt-67{--mt:67} .mt-68{--mt:68} .mt-69{--mt:69} .mt-70{--mt:70} .mt-71{--mt:71}
.mt-72{--mt:72} .mt-73{--mt:73} .mt-74{--mt:74} .mt-75{--mt:75} .mt-76{--mt:76} .mt-77{--mt:77} .mt-78{--mt:78} .mt-79{--mt:79} .mt-80{--mt:80} .mt-81{--mt:81} .mt-82{--mt:82} .mt-83{--mt:83}
.mt-84{--mt:84} .mt-85{--mt:85} .mt-86{--mt:86} .mt-87{--mt:87} .mt-88{--mt:88} .mt-89{--mt:89} .mt-90{--mt:90} .mt-91{--mt:91} .mt-92{--mt:92} .mt-93{--mt:93} .mt-94{--mt:94} .mt-95{--mt:95}
.mt-96{--mt:96} .mt-97{--mt:97} .mt-98{--mt:98} .mt-99{--mt:99} .mt-100{--mt:100} .mt-101{--mt:101} .mt-102{--mt:102} .mt-103{--mt:103} .mt-104{--mt:104} .mt-105{--mt:105} .mt-106{--mt:106} .mt-107{--mt:107}
.mt-108{--mt:108} .mt-109{--mt:109} .mt-110{--mt:110} .mt-111{--mt:111} .mt-112{--mt:112} .mt-113{--mt:113} .mt-114{--mt:114} .mt-115{--mt:115} .mt-116{--mt:116} .mt-117{--mt:117} .mt-118{--mt:118} .mt-119{--mt:119}
.mt-120{--mt:120}
.pt-0{--pt:0} .pt-1{--pt:1} .pt-2{--pt:2} .pt-3{--pt:3} .pt-4{--pt:4} .pt-5{--pt:5} .pt-6{--pt:6} .pt-7{--pt:7} .pt-8{--pt:8} .pt-9{--pt:9} .pt-10{--pt:10} .pt-11{--pt:11}
.pt-12{--pt:12} .pt-13{--pt:13} .pt-14{--pt:14} .pt-15{--pt:15} .pt-16{--pt:16} .pt-17{--pt:17} .pt-18{--pt:18} .pt-19{--pt:19} .pt-20{--pt:20} .pt-21{--pt:21} .pt-22{--pt:22} .pt-23{--pt:23}
.pt-24{--pt:24} .pt-25{--pt:25} .pt-26{--pt:26} .pt-27{--pt:27} .pt-28{--pt:28} .pt-29{--pt:29} .pt-30{--pt:30} .pt-31{--pt:31} .pt-32{--pt:32} .pt-33{--pt:33} .pt-34{--pt:34} .pt-35{--pt:35}
.pt-36{--pt:36} .pt-37{--pt:37} .pt-38{--pt:38} .pt-39{--pt:39} .pt-40{--pt:40} .pt-41{--pt:41} .pt-42{--pt:42} .pt-43{--pt:43} .pt-44{--pt:44} .pt-45{--pt:45} .pt-46{--pt:46} .pt-47{--pt:47}
.pt-48{--pt:48} .pt-49{--pt:49} .pt-50{--pt:50} .pt-51{--pt:51} .pt-52{--pt:52} .pt-53{--pt:53} .pt-54{--pt:54} .pt-55{--pt:55} .pt-56{--pt:56} .pt-57{--pt:57} .pt-58{--pt:58} .pt-59{--pt:59}
.pt-60{--pt:60} .pt-61{--pt:61} .pt-62{--pt:62} .pt-63{--pt:63} .pt-64{--pt:64} .pt-65{--pt:65} .pt-66{--pt:66} .pt-67{--pt:67} .pt-68{--pt:68} .pt-69{--pt:69} .pt-70{--pt:70} .pt-71{--pt:71}
.pt-72{--pt:72} .pt-73{--pt:73} .pt-74{--pt:74} .pt-75{--pt:75} .pt-76{--pt:76} .pt-77{--pt:77} .pt-78{--pt:78} .pt-79{--pt:79} .pt-80{--pt:80} .pt-81{--pt:81} .pt-82{--pt:82} .pt-83{--pt:83}
.pt-84{--pt:84} .pt-85{--pt:85} .pt-86{--pt:86} .pt-87{--pt:87} .pt-88{--pt:88} .pt-89{--pt:89} .pt-90{--pt:90} .pt-91{--pt:91} .pt-92{--pt:92} .pt-93{--pt:93} .pt-94{--pt:94} .pt-95{--pt:95}
.pt-96{--pt:96} .pt-97{--pt:97} .pt-98{--pt:98} .pt-99{--pt:99} .pt-100{--pt:100} .pt-101{--pt:101} .pt-102{--pt:102} .pt-103{--pt:103} .pt-104{--pt:104} .pt-105{--pt:105} .pt-106{--pt:106} .pt-107{--pt:107}
.pt-108{--pt:108} .pt-109{--pt:109} .pt-110{--pt:110} .pt-111{--pt:111} .pt-112{--pt:112} .pt-113{--pt:113} .pt-114{--pt:114} .pt-115{--pt:115} .pt-116{--pt:116} .pt-117{--pt:117} .pt-118{--pt:118} .pt-119{--pt:119}
.pt-120{--pt:120}
.pb-0{--pb:0} .pb-1{--pb:1} .pb-2{--pb:2} .pb-3{--pb:3} .pb-4{--pb:4} .pb-5{--pb:5} .pb-6{--pb:6} .pb-7{--pb:7} .pb-8{--pb:8} .pb-9{--pb:9} .pb-10{--pb:10} .pb-11{--pb:11}
.pb-12{--pb:12} .pb-13{--pb:13} .pb-14{--pb:14} .pb-15{--pb:15} .pb-16{--pb:16} .pb-17{--pb:17} .pb-18{--pb:18} .pb-19{--pb:19} .pb-20{--pb:20} .pb-21{--pb:21} .pb-22{--pb:22} .pb-23{--pb:23}
.pb-24{--pb:24} .pb-25{--pb:25} .pb-26{--pb:26} .pb-27{--pb:27} .pb-28{--pb:28} .pb-29{--pb:29} .pb-30{--pb:30} .pb-31{--pb:31} .pb-32{--pb:32} .pb-33{--pb:33} .pb-34{--pb:34} .pb-35{--pb:35}
.pb-36{--pb:36} .pb-37{--pb:37} .pb-38{--pb:38} .pb-39{--pb:39} .pb-40{--pb:40} .pb-41{--pb:41} .pb-42{--pb:42} .pb-43{--pb:43} .pb-44{--pb:44} .pb-45{--pb:45} .pb-46{--pb:46} .pb-47{--pb:47}
.pb-48{--pb:48} .pb-49{--pb:49} .pb-50{--pb:50} .pb-51{--pb:51} .pb-52{--pb:52} .pb-53{--pb:53} .pb-54{--pb:54} .pb-55{--pb:55} .pb-56{--pb:56} .pb-57{--pb:57} .pb-58{--pb:58} .pb-59{--pb:59}
.pb-60{--pb:60} .pb-61{--pb:61} .pb-62{--pb:62} .pb-63{--pb:63} .pb-64{--pb:64} .pb-65{--pb:65} .pb-66{--pb:66} .pb-67{--pb:67} .pb-68{--pb:68} .pb-69{--pb:69} .pb-70{--pb:70} .pb-71{--pb:71}
.pb-72{--pb:72} .pb-73{--pb:73} .pb-74{--pb:74} .pb-75{--pb:75} .pb-76{--pb:76} .pb-77{--pb:77} .pb-78{--pb:78} .pb-79{--pb:79} .pb-80{--pb:80} .pb-81{--pb:81} .pb-82{--pb:82} .pb-83{--pb:83}
.pb-84{--pb:84} .pb-85{--pb:85} .pb-86{--pb:86} .pb-87{--pb:87} .pb-88{--pb:88} .pb-89{--pb:89} .pb-90{--pb:90} .pb-91{--pb:91} .pb-92{--pb:92} .pb-93{--pb:93} .pb-94{--pb:94} .pb-95{--pb:95}
.pb-96{--pb:96} .pb-97{--pb:97} .pb-98{--pb:98} .pb-99{--pb:99} .pb-100{--pb:100} .pb-101{--pb:101} .pb-102{--pb:102} .pb-103{--pb:103} .pb-104{--pb:104} .pb-105{--pb:105} .pb-106{--pb:106} .pb-107{--pb:107}
.pb-108{--pb:108} .pb-109{--pb:109} .pb-110{--pb:110} .pb-111{--pb:111} .pb-112{--pb:112} .pb-113{--pb:113} .pb-114{--pb:114} .pb-115{--pb:115} .pb-116{--pb:116} .pb-117{--pb:117} .pb-118{--pb:118} .pb-119{--pb:119}
.pb-120{--pb:120}
.top-0{--top:0} .top-1{--top:1} .top-2{--top:2} .top-3{--top:3} .top-4{--top:4} .top-5{--top:5} .top-6{--top:6} .top-7{--top:7} .top-8{--top:8} .top-9{--top:9} .top-10{--top:10} .top-11{--top:11}
.top-12{--top:12} .top-13{--top:13} .top-14{--top:14} .top-15{--top:15} .top-16{--top:16} .top-17{--top:17} .top-18{--top:18} .top-19{--top:19} .top-20{--top:20} .top-21{--top:21} .top-22{--top:22} .top-23{--top:23}
.top-24{--top:24} .top-25{--top:25} .top-26{--top:26} .top-27{--top:27} .top-28{--top:28} .top-29{--top:29} .top-30{--top:30} .top-31{--top:31} .top-32{--top:32} .top-33{--top:33} .top-34{--top:34} .top-35{--top:35}
.top-36{--top:36} .top-37{--top:37} .top-38{--top:38} .top-39{--top:39} .top-40{--top:40} .top-41{--top:41} .top-42{--top:42} .top-43{--top:43} .top-44{--top:44} .top-45{--top:45} .top-46{--top:46} .top-47{--top:47}
.top-48{--top:48} .top-49{--top:49} .top-50{--top:50} .top-51{--top:51} .top-52{--top:52} .top-53{--top:53} .top-54{--top:54} .top-55{--top:55} .top-56{--top:56} .top-57{--top:57} .top-58{--top:58} .top-59{--top:59}
.top-60{--top:60} .top-61{--top:61} .top-62{--top:62} .top-63{--top:63} .top-64{--top:64} .top-65{--top:65} .top-66{--top:66} .top-67{--top:67} .top-68{--top:68} .top-69{--top:69} .top-70{--top:70} .top-71{--top:71}
.top-72{--top:72} .top-73{--top:73} .top-74{--top:74} .top-75{--top:75} .top-76{--top:76} .top-77{--top:77} .top-78{--top:78} .top-79{--top:79} .top-80{--top:80} .top-81{--top:81} .top-82{--top:82} .top-83{--top:83}
.top-84{--top:84} .top-85{--top:85} .top-86{--top:86} .top-87{--top:87} .top-88{--top:88} .top-89{--top:89} .top-90{--top:90} .top-91{--top:91} .top-92{--top:92} .top-93{--top:93} .top-94{--top:94} .top-95{--top:95}
.top-96{--top:96} .top-97{--top:97} .top-98{--top:98} .top-99{--top:99} .top-100{--top:100} .top-101{--top:101} .top-102{--top:102} .top-103{--top:103} .top-104{--top:104} .top-105{--top:105} .top-106{--top:106} .top-107{--top:107}
.top-108{--top:108} .top-109{--top:109} .top-110{--top:110} .top-111{--top:111} .top-112{--top:112} .top-113{--top:113} .top-114{--top:114} .top-115{--top:115} .top-116{--top:116} .top-117{--top:117} .top-118{--top:118} .top-119{--top:119}
.top-120{--top:120} .top-121{--top:121} .top-122{--top:122} .top-123{--top:123} .top-124{--top:124} .top-125{--top:125} .top-126{--top:126} .top-127{--top:127} .top-128{--top:128} .top-129{--top:129} .top-130{--top:130} .top-131{--top:131}
.top-132{--top:132} .top-133{--top:133} .top-134{--top:134} .top-135{--top:135} .top-136{--top:136} .top-137{--top:137} .top-138{--top:138} .top-139{--top:139} .top-140{--top:140} .top-141{--top:141} .top-142{--top:142} .top-143{--top:143}
.top-144{--top:144} .top-145{--top:145} .top-146{--top:146} .top-147{--top:147} .top-148{--top:148} .top-149{--top:149} .top-150{--top:150} .top-151{--top:151} .top-152{--top:152} .top-153{--top:153} .top-154{--top:154} .top-155{--top:155}
.top-156{--top:156} .top-157{--top:157} .top-158{--top:158} .top-159{--top:159} .top-160{--top:160} .top-161{--top:161} .top-162{--top:162} .top-163{--top:163} .top-164{--top:164} .top-165{--top:165} .top-166{--top:166} .top-167{--top:167}
.top-168{--top:168} .top-169{--top:169} .top-170{--top:170} .top-171{--top:171} .top-172{--top:172} .top-173{--top:173} .top-174{--top:174} .top-175{--top:175} .top-176{--top:176} .top-177{--top:177} .top-178{--top:178} .top-179{--top:179}
.top-180{--top:180} .top-181{--top:181} .top-182{--top:182} .top-183{--top:183} .top-184{--top:184} .top-185{--top:185} .top-186{--top:186} .top-187{--top:187} .top-188{--top:188} .top-189{--top:189} .top-190{--top:190} .top-191{--top:191}
.top-192{--top:192} .top-193{--top:193} .top-194{--top:194} .top-195{--top:195} .top-196{--top:196} .top-197{--top:197} .top-198{--top:198} .top-199{--top:199} .top-200{--top:200}
.h-0{--h:0} .h-1{--h:1} .h-2{--h:2} .h-3{--h:3} .h-4{--h:4} .h-5{--h:5} .h-6{--h:6} .h-7{--h:7} .h-8{--h:8} .h-9{--h:9} .h-10{--h:10} .h-11{--h:11}
.h-12{--h:12} .h-13{--h:13} .h-14{--h:14} .h-15{--h:15} .h-16{--h:16} .h-17{--h:17} .h-18{--h:18} .h-19{--h:19} .h-20{--h:20} .h-21{--h:21} .h-22{--h:22} .h-23{--h:23}
.h-24{--h:24} .h-25{--h:25} .h-26{--h:26} .h-27{--h:27} .h-28{--h:28} .h-29{--h:29} .h-30{--h:30} .h-31{--h:31} .h-32{--h:32} .h-33{--h:33} .h-34{--h:34} .h-35{--h:35}
.h-36{--h:36} .h-37{--h:37} .h-38{--h:38} .h-39{--h:39} .h-40{--h:40} .h-41{--h:41} .h-42{--h:42} .h-43{--h:43} .h-44{--h:44} .h-45{--h:45} .h-46{--h:46} .h-47{--h:47}
.h-48{--h:48} .h-49{--h:49} .h-50{--h:50} .h-51{--h:51} .h-52{--h:52} .h-53{--h:53} .h-54{--h:54} .h-55{--h:55} .h-56{--h:56} .h-57{--h:57} .h-58{--h:58} .h-59{--h:59}
.h-60{--h:60} .h-61{--h:61} .h-62{--h:62} .h-63{--h:63} .h-64{--h:64} .h-65{--h:65} .h-66{--h:66} .h-67{--h:67} .h-68{--h:68} .h-69{--h:69} .h-70{--h:70} .h-71{--h:71}
.h-72{--h:72} .h-73{--h:73} .h-74{--h:74} .h-75{--h:75} .h-76{--h:76} .h-77{--h:77} .h-78{--h:78} .h-79{--h:79} .h-80{--h:80} .h-81{--h:81} .h-82{--h:82} .h-83{--h:83}
.h-84{--h:84} .h-85{--h:85} .h-86{--h:86} .h-87{--h:87} .h-88{--h:88} .h-89{--h:89} .h-90{--h:90} .h-91{--h:91} .h-92{--h:92} .h-93{--h:93} .h-94{--h:94} .h-95{--h:95}
.h-96{--h:96} .h-97{--h:97} .h-98{--h:98} .h-99{--h:99} .h-100{--h:100} .h-101{--h:101} .h-102{--h:102} .h-103{--h:103} .h-104{--h:104} .h-105{--h:105} .h-106{--h:106} .h-107{--h:107}
.h-108{--h:108} .h-109{--h:109} .h-110{--h:110} .h-111{--h:111} .h-112{--h:112} .h-113{--h:113} .h-114{--h:114} .h-115{--h:115} .h-116{--h:116} .h-117{--h:117} .h-118{--h:118} .h-119{--h:119}
.h-120{--h:120} .h-121{--h:121} .h-122{--h:122} .h-123{--h:123} .h-124{--h:124} .h-125{--h:125} .h-126{--h:126} .h-127{--h:127} .h-128{--h:128} .h-129{--h:129} .h-130{--h:130} .h-131{--h:131}
.h-132{--h:132} .h-133{--h:133} .h-134{--h:134} .h-135{--h:135} .h-136{--h:136} .h-137{--h:137} .h-138{--h:138} .h-139{--h:139} .h-140{--h:140} .h-141{--h:141} .h-142{--h:142} .h-143{--h:143}
.h-144{--h:144} .h-145{--h:145} .h-146{--h:146} .h-147{--h:147} .h-148{--h:148} .h-149{--h:149} .h-150{--h:150} .h-151{--h:151} .h-152{--h:152} .h-153{--h:153} .h-154{--h:154} .h-155{--h:155}
.h-156{--h:156} .h-157{--h:157} .h-158{--h:158} .h-159{--h:159} .h-160{--h:160} .h-161{--h:161} .h-162{--h:162} .h-163{--h:163} .h-164{--h:164} .h-165{--h:165} .h-166{--h:166} .h-167{--h:167}
.h-168{--h:168} .h-169{--h:169} .h-170{--h:170} .h-171{--h:171} .h-172{--h:172} .h-173{--h:173} .h-174{--h:174} .h-175{--h:175} .h-176{--h:176} .h-177{--h:177} .h-178{--h:178} .h-179{--h:179}
.h-180{--h:180} .h-181{--h:181} .h-182{--h:182} .h-183{--h:183} .h-184{--h:184} .h-185{--h:185} .h-186{--h:186} .h-187{--h:187} .h-188{--h:188} .h-189{--h:189} .h-190{--h:190} .h-191{--h:191}
.h-192{--h:192} .h-193{--h:193} .h-194{--h:194} .h-195{--h:195} .h-196{--h:196} .h-197{--h:197} .h-198{--h:198} .h-199{--h:199} .h-200{--h:200}

/* Scroll-in animation (added by js/site.js) */
.reveal { opacity: 0; transform: translateY(20%); transition: opacity .65s ease .1s, transform .65s ease .1s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- 6. Page themes ---------- */
.theme-home { --font: "Georgia", Georgia, serif;
  --btn-bg: var(--purple); --btn-text: var(--cream); --btn-border: var(--cream); --btn-hover-bg: var(--cream); --btn-hover-text: var(--purple); --btn-hover-border: var(--purple); }
:where(.theme-home) h1 { font-size: 48px; font-weight: 700; line-height: 1.3; color: var(--navy); }
:where(.theme-home) h2 { font-size: 34px; font-weight: 400; line-height: 1.3; color: var(--plum); }
:where(.theme-home) h3 { font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--navy); }
:where(.theme-home) h4 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--navy); }
:where(.theme-home) h5 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--navy); }
:where(.theme-home) p, :where(.theme-home) li { font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--navy); }
.theme-swift { --font: "Inter", sans-serif;
  --btn-bg: rgb(241, 241, 241); --btn-text: var(--blue); --btn-border: var(--blue); --btn-hover-bg: rgb(23, 107, 224); --btn-hover-text: #fff; --btn-hover-border: rgb(23, 107, 224); }
:where(.theme-swift) .button { min-height: 37px; padding: 4px 12px; font-size: 14px; font-weight: 500; }
:where(.theme-swift) h1 { font-size: 44px; font-weight: 400; line-height: 1.3; color: var(--blue); }
:where(.theme-swift) h3 { font-size: 28px; font-weight: 900; line-height: 1.8; color: var(--ink); }
:where(.theme-swift) h4 { font-size: 20px; font-weight: 900; line-height: 1.3; color: var(--ink); }
:where(.theme-swift) h5 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
:where(.theme-swift) p, :where(.theme-swift) li { font-size: 18px; font-weight: 400; line-height: 1.8; color: var(--ink); }
:where(.theme-swift .band) h2 { font-size: 32px; font-weight: 500; line-height: 1.8; color: var(--blue); }
.theme-swift-mobile { --font: "Inter", sans-serif;
  --btn-bg: var(--honey); --btn-text: var(--purple); --btn-border: var(--purple); --btn-hover-bg: var(--purple); --btn-hover-text: var(--cream); --btn-hover-border: var(--purple); }
:where(.theme-swift-mobile) .button { min-height: 45px; padding: 4px 16px; font-size: 14px; font-weight: 500; }
:where(.theme-swift-mobile) h1 { font-size: 44px; font-weight: 400; line-height: 1.3; color: var(--purple); }
:where(.theme-swift-mobile) h3 { font-size: 28px; font-weight: 900; line-height: 1.8; color: var(--ink); }
:where(.theme-swift-mobile) h4 { font-size: 22px; font-weight: 700; line-height: 1.8; color: var(--ink); }
:where(.theme-swift-mobile) h5 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
:where(.theme-swift-mobile) p, :where(.theme-swift-mobile) li { font-size: 18px; font-weight: 400; line-height: 1.8; color: var(--ink); }
:where(.theme-swift-mobile .band) h2 { font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--purple); }
.theme-saving-face { --font: "Poppins", sans-serif;
  --btn-bg: var(--cream); --btn-text: rgba(115, 59, 48, 0.87); --btn-border: rgba(115, 59, 48, 0.87); --btn-hover-bg: rgba(115, 59, 48, 0.88); --btn-hover-text: var(--cream); --btn-hover-border: rgba(115, 59, 48, 0.88); }
:where(.theme-saving-face) .button { font-weight: 500; }
:where(.theme-saving-face) h2 { font-size: 38px; font-weight: 500; line-height: 1.3; color: var(--ink); }
:where(.theme-saving-face) h3 { font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--taupe); }
:where(.theme-saving-face) h4 { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--taupe); }
:where(.theme-saving-face) p, :where(.theme-saving-face) li { font-size: 18px; font-weight: 400; line-height: 1.8; color: var(--ink); }
:where(.theme-saving-face .band) h2 { font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--white); }
.theme-melody { --font: "Poppins", sans-serif;
  --btn-bg: rgb(130, 0, 0); --btn-text: #fff; --btn-border: rgb(130, 0, 0); --btn-hover-bg: var(--cream); --btn-hover-text: rgb(130, 0, 0); --btn-hover-border: rgb(130, 0, 0); }
:where(.theme-melody) .button { min-height: 40px; padding: 4px 16px; }
:where(.theme-melody) h1 { font-size: 46px; font-weight: 400; line-height: 1.3; color: var(--ink); }
:where(.theme-melody) h2 { font-size: 30px; font-weight: 900; line-height: 1.5; color: var(--gold); }
:where(.theme-melody) h3 { font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--ink); }
:where(.theme-melody) h4 { font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--ink); }
:where(.theme-melody) h5 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
:where(.theme-melody) p, :where(.theme-melody) li { font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink); }
:where(.theme-melody .band) h2 { font-size: 48px; font-weight: 900; line-height: 1.5; color: var(--white); }

/* ---------- 7. Mobile ---------- */
@media (max-width: 920px) {
  .site-header__inner { padding: 24px 16px; grid-template-columns: 1fr auto; }
  .logo img { width: 71px; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: 0; cursor: pointer; color: var(--nav); }
  .burger span { display: block; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav { display: none; grid-column: 1 / -1; padding-top: 24px; }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: flex-end; gap: 20px; }
  .has-dropdown { flex-wrap: wrap; justify-content: flex-end; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: block; position: static; width: 100%; text-align: right; padding: 12px 0 0; }
  .dropdown::before { display: none; }
  .nav a { font-size: 18px; }

  .block { padding-top: calc(min(var(--pt, 0), 6) * 8px); padding-bottom: calc(min(var(--pb, 0), 6) * 8px); }
  .inner { padding-inline: 16px; }
  .row { display: block; }
  .inner > *, .col > *, .row > * { margin-left: 0; margin-top: calc(min(var(--mt, 0), 4) * 8px); }
  .row > :not(img, .img-link) { width: auto; }
  .inner > :not(img, .img-link), .col > :not(img, .img-link) { width: auto; }
  .row > * + * { margin-top: 24px; }
  .inner img, .inner .img-link { margin-inline: auto; }
  .stack { width: min(100%, calc(var(--n) * 51px)) !important; margin-inline: auto !important; }
  .stack.has-text { display: block; width: auto !important; }
  .stack.has-text > * { margin-top: 16px; }
  .button, .row > .button, .stack > .button { width: fit-content; min-width: 180px; }
  .centered { margin-inline: auto !important; }
  .band { padding: 10px 16px; }
  .vline { display: none; }
  .block.hero { padding-top: 0; }
  .hero .block-bg { position: static; height: auto; margin-bottom: 24px; }
  :where(.theme-home) h1 { font-size: 32px; }
  :where(.theme-home) h2 { font-size: 26px; }
  :where(.theme-home) h3 { font-size: 20px; }
  :where(.theme-home) h4 { font-size: 18px; }
  :where(.theme-home) h5 { font-size: 16px; }
  :where(.theme-home) p, :where(.theme-home) li { font-size: 16px; }
  :where(.theme-swift) h1 { font-size: 32px; }
  :where(.theme-swift) h3 { font-size: 22px; }
  :where(.theme-swift) h4 { font-size: 18px; }
  :where(.theme-swift) h5 { font-size: 16px; }
  :where(.theme-swift) p, :where(.theme-swift) li { font-size: 16px; }
  :where(.theme-swift .band) h2 { font-size: 24px; }
  :where(.theme-swift-mobile) h1 { font-size: 32px; }
  :where(.theme-swift-mobile) h3 { font-size: 22px; }
  :where(.theme-swift-mobile) h4 { font-size: 19px; }
  :where(.theme-swift-mobile) h5 { font-size: 16px; }
  :where(.theme-swift-mobile) p, :where(.theme-swift-mobile) li { font-size: 16px; }
  :where(.theme-swift-mobile .band) h2 { font-size: 24px; }
  :where(.theme-saving-face) h2 { font-size: 28px; }
  :where(.theme-saving-face) h3 { font-size: 22px; }
  :where(.theme-saving-face) h4 { font-size: 19px; }
  :where(.theme-saving-face) p, :where(.theme-saving-face) li { font-size: 16px; }
  :where(.theme-saving-face .band) h2 { font-size: 24px; }
  :where(.theme-melody) h1 { font-size: 32px; }
  :where(.theme-melody) h2 { font-size: 24px; }
  :where(.theme-melody) h3 { font-size: 20px; }
  :where(.theme-melody) h4 { font-size: 18px; }
  :where(.theme-melody) h5 { font-size: 16px; }
  :where(.theme-melody) p, :where(.theme-melody) li { font-size: 16px; }
  :where(.theme-melody .band) h2 { font-size: 32px; }
  .size-24 { font-size: 20px; }
  .size-28 { font-size: 22px; }
  .size-48 { font-size: 32px; }
}