/*!
 * ============================================================================
 *  VIEW NU CONSTRUCTION — site.css
 * ============================================================================
 *  A hand-written, dependency-free stylesheet. There is no framework and no
 *  build step: the markup uses Tailwind-style utility class names, but every
 *  rule is written out by hand below, so the file loads as-is on shared
 *  hosting and nothing needs compiling.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* brand — sky blue */
  --brand-50:  #EFF8FF;
  --brand-100: #D9EFFF;
  --brand-200: #B6DFFF;
  --brand-300: #84C7FF;
  --brand-400: #4FA8FF;
  --brand-500: #2B8AF0;
  --brand-600: #1C6CD4;
  --brand-700: #1856AB;
  --brand-800: #1B4A88;
  --brand-900: #1D406F;

  /* sun — warm amber */
  --sun-50:   #FFFBEB;
  --sun-100:  #FFF3C4;
  --sun-200:  #FFE68A;
  --sun-300:  #FFD44D;
  --sun-400:  #FFBE1A;
  --sun-500:  #F9A400;
  --sun-600:  #E08600;
  --sun-700:  #B96700;
  --sun-800:  #8F4F08;
  --sun-900:  #78410D;

  /* coral — soft orange accent */
  --coral-50:  #FFF5F0;
  --coral-100: #FFE6D9;
  --coral-200: #FFC9B0;
  --coral-300: #FFA37D;
  --coral-400: #FF7A4D;
  --coral-500: #F4562A;
  --coral-600: #E03C12;
  --coral-700: #BC2D0C;
  --coral-800: #96260F;
  --coral-900: #7A2310;

  /* mint — fresh green for "ok / go" moments */
  --mint-50:  #EEFBF3;
  --mint-100: #D3F4E1;
  --mint-200: #A7E8C6;
  --mint-400: #45C68A;
  --mint-500: #23A96C;
  --mint-600: #178755;
  --mint-700: #146B45;
  --mint-800: #125437;

  /* ink — warm neutrals for text */
  --ink-50:  #F8F8F7;
  --ink-100: #EFEFEC;
  --ink-200: #DEDED8;
  --ink-300: #C2C2B8;
  --ink-400: #96968A;
  --ink-500: #75756A;
  --ink-600: #5C5C53;
  --ink-700: #4A4A43;
  --ink-800: #33332E;
  --ink-900: #212120;

  --cream:   #FFFDF7;
  --white:   #FFFFFF;

  --radius-sm: 0.75rem;
  --radius:    1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2rem;

  --shadow-sm: 0 1px 2px rgba(33,33,32,.05);
  --shadow:    0 4px 16px -4px rgba(33,33,32,.10);
  --shadow-md: 0 12px 28px -10px rgba(33,33,32,.16);
  --shadow-lg: 0 26px 60px -20px rgba(33,33,32,.24);
  --shadow-xl: 0 36px 80px -26px rgba(33,33,32,.30);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Segoe Script", "Comic Sans MS", "Apple Chancery", cursive;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body, button, input, select, textarea { font-family: var(--font); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

:focus-visible {
  outline: 3px solid var(--sun-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sun-300); color: var(--ink-900); }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   3. LAYOUT UTILITIES

   NOTE: this section comes BEFORE the component styles, so a component rule
   (e.g. .info-card's background) beats a utility of the same specificity
   (e.g. .bg-brand-600) no matter what order the classes appear in the markup.
   When a component needs a different colour, give it a variant class rather
   than reaching for a utility that will not apply.
   --------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
/* Grid and flex children default to min-width:auto, i.e. they refuse to shrink
   below their content's min-content width. One wide <select> or one unbreakable
   label is then enough to make a column wider than the viewport and the page
   scrolls sideways on a phone. Undo that default for grid children. */
.grid > * { min-width: 0; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
/* NOTE: .hidden is NOT here. It has to outrank component classes such as
   .btn / .topbar-link / .nav-link that set `display` themselves, and the
   component layer sits below this one. See "DISPLAY OVERRIDES" before the
   responsive section. */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.place-items-center { place-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.ml-auto { margin-left: auto; }
.h-px { height: 1px; }
.relative { position: relative; }
.group { position: relative; }
.scroll-smooth { scroll-behavior: smooth; }

.order-1 { order: 1; }
.order-2 { order: 2; }

/* pull stacked siblings on top of each other (overlapping avatars) */
.-space-x-3 > * + * { margin-left: -.75rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-2 { margin-left: .5rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.col-span-6 { grid-column: span 6 / span 6; }

/* gaps */
.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-7 { column-gap: 1.75rem; }
.gap-y-3 { row-gap: .75rem; }
.gap-y-8 { row-gap: 2rem; }

/* margins */
.mt-0\.5 { margin-top: .125rem; }
.mt-1   { margin-top: .25rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-2   { margin-top: .5rem; }
.mt-3   { margin-top: .75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-7   { margin-top: 1.75rem; }
.mt-8   { margin-top: 2rem; }
.mt-9   { margin-top: 2.25rem; }
.mt-10  { margin-top: 2.5rem; }
.mt-12  { margin-top: 3rem; }
.mt-14  { margin-top: 3.5rem; }
.mt-16  { margin-top: 4rem; }

.mb-8  { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

/* vertical rhythm between stacked children (lists, forms, sidebars) */
.space-y-1   > * + * { margin-top: .25rem; }
.space-y-2\.5 > * + * { margin-top: .625rem; }
.space-y-3   > * + * { margin-top: .75rem; }
.space-y-4   > * + * { margin-top: 1rem; }
.space-y-5   > * + * { margin-top: 1.25rem; }
.space-y-6   > * + * { margin-top: 1.5rem; }

/* padding */
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-14 { padding-top: 3.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-5 { padding-left: 1.25rem; }

/* sizing */
.w-full { width: 100%; }
.w-3  { width: .75rem; }
.w-4  { width: 1rem; }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem; }
.w-7  { width: 1.75rem; }
.w-8  { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.h-3  { height: .75rem; }
.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-7  { height: 1.75rem; }
.h-8  { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }

/* max-width */
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }

/* borders */
/* Each rule uses the per-side shorthand on purpose. Writing
   "border-top-width: 1px; border-style: solid" would style all four sides
   solid while the untouched sides kept their initial width (medium = 3px),
   so the "1px divider" became a full 3px box. */
.border      { border: 1px solid var(--ink-200); }
.border-0    { border: 0; }
.border-y    { border-top: 1px solid; border-bottom: 1px solid; }
.border-t    { border-top: 1px solid; }
.border-b    { border-bottom: 1px solid; }
.rounded-full  { border-radius: 9999px; }
.rounded-lg    { border-radius: .75rem; }
.rounded-xl    { border-radius: 1rem; }
.rounded-2xl   { border-radius: 1.25rem; }
.rounded-3xl   { border-radius: 1.75rem; }

.divide-y > * + * { border-top: 1px solid; }

/* opacity helpers used on borders / backgrounds */
.border-ink-100, .divide-ink-100      { border-color: var(--ink-100); }
.border-ink-200                      { border-color: var(--ink-200); }
.border-brand-100                    { border-color: var(--brand-100); }
.border-white\/10                    { border-color: rgba(255,255,255,.10); }
.border-white\/20                    { border-color: rgba(255,255,255,.20); }
.bg-white\/15                        { background: rgba(255,255,255,.15); }
.text-white\/80                      { color: rgba(255,255,255,.80); }
.text-brand-100\/90                  { color: rgba(217,239,255,.90); }
.text-brand-100\/80                  { color: rgba(217,239,255,.80); }
.text-brand-100\/70                  { color: rgba(217,239,255,.70); }
.text-brand-100\/60                  { color: rgba(217,239,255,.60); }

/* backgrounds */
.bg-cream      { background: var(--cream); }
.bg-white      { background: var(--white); }
.bg-ink-200    { background: var(--ink-200); }
.bg-brand-50   { background: var(--brand-50); }
.bg-brand-100  { background: var(--brand-100); }
.bg-brand-500  { background: var(--brand-500); }
.bg-brand-600  { background: var(--brand-600); }
.bg-sun-100    { background: var(--sun-100); }
.bg-sun-400    { background: var(--sun-400); }

/* text colors */
.text-white       { color: var(--white); }
.text-ink-400     { color: var(--ink-400); }
.text-ink-500     { color: var(--ink-500); }
.text-ink-600     { color: var(--ink-600); }
.text-ink-700     { color: var(--ink-700); }
.text-ink-800     { color: var(--ink-800); }
.text-ink-900     { color: var(--ink-900); }
.text-brand-50    { color: var(--brand-50); }
.text-brand-100   { color: var(--brand-100); }
.text-brand-600   { color: var(--brand-600); }
.text-brand-700   { color: var(--brand-700); }
.text-sun-300     { color: var(--sun-300); }
.text-sun-700     { color: var(--sun-700); }
.text-sun-800     { color: var(--sun-800); }
.text-coral-400   { color: var(--coral-400); }
.text-emerald-50  { color: #ecfdf5; }
.text-orange-50   { color: #fff7ed; }

/* typography */
.text-xs     { font-size: .75rem; line-height: 1.15rem; }
.text-sm     { font-size: .875rem; line-height: 1.4rem; }
.text-base   { font-size: 1rem; line-height: 1.65; }
.text-lg     { font-size: 1.125rem; line-height: 1.7; }
.text-xl     { font-size: 1.25rem; line-height: 1.6; }
.text-2xl    { font-size: 1.5rem; line-height: 1.4; }
.text-3xl    { font-size: 1.875rem; line-height: 1.25; }
.text-4xl    { font-size: 2.25rem; line-height: 1.15; }
.text-5xl    { font-size: 3rem; line-height: 1.08; }
.text-6xl    { font-size: 3.75rem; line-height: 1.05; }

.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono      { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.italic         { font-style: italic; }

.leading-tight      { line-height: 1.25; }
.leading-snug       { line-height: 1.4; }
.leading-relaxed    { line-height: 1.7; }
.leading-\[1\.05\]  { line-height: 1.05; }

.tracking-tight   { letter-spacing: -.02em; }
.tracking-widest  { letter-spacing: .12em; }
.uppercase        { text-transform: uppercase; }

.text-left    { text-align: left; }
.text-center  { text-align: center; }

.underline { text-decoration-line: underline; }
.underline-offset-2 { text-underline-offset: 2px; }
.underline-offset-4 { text-underline-offset: 4px; }

.break-all { word-break: break-word; }
.list-disc { list-style: disc; }

/* hover states */
.hover\:text-white:hover     { color: var(--white); }
.hover\:text-sun-200:hover   { color: var(--sun-200); }
.hover\:text-brand-700:hover { color: var(--brand-700); }
.hover\:shadow-lg:hover      { box-shadow: var(--shadow-lg); }
.hover\:-translate-y-1:hover { transform: translateY(-4px); }

.antialiased { -webkit-font-smoothing: antialiased; }
.overflow-x-hidden { overflow-x: hidden; }
.object-cover { object-fit: cover; }
.transition { transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s, transform .25s, opacity .25s; }

/* ---------------------------------------------------------------------------
   4. REUSABLE COMPONENTS
   --------------------------------------------------------------------------- */

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .2s, color .2s, border-color .2s;
}
.btn svg { flex-shrink: 0; }
/* A nowrap label sets a floor on how narrow the button can get: the submit
   button's min-content width is 341px, which used to widen the whole contact
   form column and scroll the page sideways on a 320px phone. Full-width
   buttons are the only ones that get squeezed, so they are the only ones
   allowed to wrap onto a second line. */
.btn.w-full { white-space: normal; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: .65rem 1.2rem; font-size: .875rem; }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.0625rem; }

.btn-primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(43,138,240,.75);
}
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 18px 34px -12px rgba(43,138,240,.85); }

.btn-sun {
  background: var(--sun-400);
  color: var(--sun-900);
  box-shadow: 0 10px 26px -10px rgba(255,190,26,.8);
}
.btn-sun:hover { background: var(--sun-300); box-shadow: 0 18px 34px -12px rgba(255,190,26,.9); }

.btn-outline {
  background: var(--white);
  color: var(--brand-700);
  border-color: var(--ink-200);
}
.btn-outline:hover { border-color: var(--brand-300); background: var(--brand-50); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- top bar --- */
.topbar {
  background: var(--brand-800);
  color: #fff;
  font-size: .8125rem;
  height: 2.75rem;
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  transition: color .2s;
}
.topbar-link:hover { color: #fff; }
.topbar-phone {
  background: var(--brand-600);
  color: #fff;
  padding: .3rem .85rem;
  border-radius: 9999px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.topbar-phone:hover { background: var(--brand-500); color: #fff; }

/* --- header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,253,247,.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background-color .25s;
}
.site-header.is-stuck {
  box-shadow: 0 8px 30px -18px rgba(33,33,32,.45);
  border-bottom-color: var(--ink-100);
  background: rgba(255,253,247,.95);
}
.site-header > .max-w-7xl { height: 4.75rem; }

.nav-link {
  position: relative;
  padding: .6rem .95rem;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink-700);
  border-radius: 9999px;
  transition: color .2s, background-color .2s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .2rem;
  width: 0;
  height: 3px;
  border-radius: 9999px;
  background: var(--sun-400);
  transform: translateX(-50%);
  transition: width .25s var(--ease);
}
.nav-link:hover { color: var(--brand-700); background: var(--brand-50); }
.nav-link:hover::after, .nav-link.is-active::after { width: 1.35rem; }
.nav-link.is-active { color: var(--brand-800); }
.nav-link.is-active::after { width: 1.35rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  color: var(--ink-800);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink-200);
  transition: box-shadow .2s, color .2s;
}
.nav-toggle:hover { box-shadow: inset 0 0 0 1.5px var(--brand-300); color: var(--brand-600); }
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

.mobile-nav {
  border-top: 1px solid var(--ink-100);
  background: var(--cream);
  box-shadow: 0 24px 40px -28px rgba(33,33,32,.6);
}
.mobile-link {
  padding: .9rem .25rem;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-100);
}
.mobile-link.is-active { color: var(--brand-700); }

/* --- hero --- */
.hero { position: relative; overflow: hidden; padding-bottom: 3rem; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(10px); }
.hero-blob-a {
  width: 34rem; height: 34rem; top: -12rem; right: -8rem;
  background: radial-gradient(circle at 30% 30%, rgba(255,212,77,.55), rgba(255,212,77,0) 68%);
}
.hero-blob-b {
  width: 30rem; height: 30rem; top: 8rem; left: -12rem;
  background: radial-gradient(circle at 60% 40%, rgba(132,199,255,.45), rgba(132,199,255,0) 68%);
}
.hero-blob-c {
  width: 26rem; height: 26rem; bottom: -14rem; left: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(167,232,198,.40), rgba(167,232,198,0) 70%);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .7rem;
  border-radius: 9999px;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--sun-200);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--sun-800);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-dot {
  width: .6rem; height: .6rem; border-radius: 9999px;
  background: var(--mint-500);
  box-shadow: 0 0 0 4px rgba(35,169,108,.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(35,169,108,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(35,169,108,.05); }
}

.marker-highlight {
  position: relative;
  white-space: nowrap;
  color: var(--brand-800);
}
.marker-highlight::after {
  content: "";
  position: absolute;
  left: -.12em; right: -.12em; bottom: .04em;
  height: .42em;
  background: linear-gradient(100deg, var(--sun-200), var(--sun-300));
  border-radius: .12em .3em .12em .3em;
  z-index: -1;
  transform: rotate(-1.2deg);
}

.check-dot {
  display: inline-grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 9999px;
  background: var(--mint-100);
  color: var(--mint-700);
  flex-shrink: 0;
}
.check-dot-sm { width: 1.25rem; height: 1.25rem; }

.hero-art {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--brand-100), var(--sun-100));
  box-shadow: var(--shadow-xl);
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.55);
  pointer-events: none;
}

.mini-stat {
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--ink-100);
}
.mini-stat-icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: .9rem;
  margin-bottom: .75rem;
}
.mini-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.mini-stat-label {
  font-size: .8125rem;
  color: var(--ink-500);
  line-height: 1.4;
  margin-top: .3rem;
}

/* --- avatars --- */
.avatar {
  display: grid;
  place-items: center;
  width: 2.85rem; height: 2.85rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  box-shadow: 0 0 0 3px var(--cream);
}
.avatar-a { background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); }
.avatar-b { background: linear-gradient(140deg, var(--sun-400), var(--coral-400)); color: var(--sun-900); }
.avatar-sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; }

/* --- trust strip icons --- */
.trust-icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
}
.trust-icon-0 { background: var(--brand-50);   color: var(--brand-600); }
.trust-icon-1 { background: var(--mint-100);   color: var(--mint-700); }
.trust-icon-2 { background: var(--sun-100);    color: var(--sun-700); }
.trust-icon-3 { background: var(--coral-100);  color: var(--coral-600); }

/* The text column sits next to a fixed 3rem icon that never shrinks, so on
   narrow screens it can be left with very little room. Let it shrink and let
   long words break — otherwise a single wide word ("experience") pushes the
   text past the grid cell and the whole page scrolls sideways. */
.trust-icon + div {
  min-width: 0;
  overflow-wrap: break-word;
}

/* --- sections --- */
.section { padding: 5rem 0; position: relative; }
.section-cream { background: var(--cream); }
.section-white { background: var(--white); }
.section-mint  { background: linear-gradient(180deg, #F3FCF7, var(--mint-50)); }
.section-blue  { background: linear-gradient(160deg, var(--brand-700), var(--brand-500)); color: #fff; }

.section-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.section-title {
  margin-top: 1rem;
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink-900);
}
.section-lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-500);
}
.section-lede.text-left { text-align: left; }
.section-blue .section-title, .section-blue .section-lede { color: #fff; }

/* --- hero service list (left column, beside the image) ---
   Two columns so nine items stay compact. Check icons match the site's existing
   list language; the tagline above already carries the promise. */
.hero-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 1.1rem;
  margin-top: 1.4rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-600);
}
.hero-services li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}
.hero-services svg {
  flex: 0 0 auto;
  margin-top: .15rem;
  color: var(--mint-600);
}
.hero-sep { color: var(--brand-300); padding: 0 .2rem; }

.eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brand-600);
}
.eyebrow-light { color: var(--sun-300); }

.prose { max-width: 38rem; }
.prose p { color: var(--ink-600); font-size: 1.0625rem; line-height: 1.78; }
.prose p + p { margin-top: 1.1rem; }

.script-note {
  font-family: var(--font-script);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral-500);
  line-height: 1;
}

/* --- page hero (interior pages) --- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5.5rem;
  background: linear-gradient(160deg, var(--brand-700), var(--brand-500));
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 30rem; height: 30rem;
  top: -14rem; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,77,.4), rgba(255,212,77,0) 70%);
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 22rem; height: 22rem;
  bottom: -12rem; left: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
.page-hero-warm { background: linear-gradient(160deg, var(--coral-600), var(--sun-500)); }
.page-hero-mint { background: linear-gradient(160deg, var(--mint-700), var(--mint-500)); }
/* deeper blue than the .page-hero default, so the services and contact heroes
   read as their own colour rather than as "no variant" */
.page-hero-blue { background: linear-gradient(160deg, var(--brand-900), var(--brand-700)); }
.page-hero > .max-w-7xl { padding-top: 1rem; padding-bottom: 1rem; }

/* --- cards --- */
.card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}
.card-icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 1.1rem;
  background: var(--brand-50);
  color: var(--brand-600);
  margin-bottom: 1.25rem;
  transition: background-color .28s, color .28s, transform .28s var(--ease);
}
.card:hover .card-icon { background: var(--brand-500); color: #fff; transform: rotate(-6deg) scale(1.05); }
.card-icon-mint  { background: var(--mint-100); color: var(--mint-700); }
.card-icon-sun   { background: var(--sun-100);  color: var(--sun-700); }
.card-icon-coral { background: var(--coral-100); color: var(--coral-600); }

.card-title { font-size: 1.3rem; font-weight: 800; color: var(--ink-900); line-height: 1.25; }
.card-text   { margin-top: .65rem; color: var(--ink-600); line-height: 1.7; font-size: .9375rem; }
.card-list   { margin-top: 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.card-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  color: var(--ink-600);
  line-height: 1.5;
}
.card-list li svg { color: var(--mint-500); flex-shrink: 0; margin-top: .22rem; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: .875rem;
  font-weight: 800;
  color: var(--brand-600);
  transition: gap .2s, color .2s;
}
.card:hover .card-link { gap: .7rem; color: var(--brand-800); }

.info-card {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.info-card .feature-text { margin-top: .75rem; }

/* Flat brand panel variant. It exists because the colour utilities sit in a
   layer ABOVE this one: on `.info-card` a `bg-brand-600` / `border-0` in the
   markup loses to `.info-card`'s own background and border, which left the
   whole panel as white text on a white card. Give it its own rule instead of
   relying on a utility to win. */
.info-card-dark {
  padding: 1.75rem;
  background: var(--brand-600);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* --- service blocks (services page) --- */
.svc-block {
  padding: 2.25rem 2rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.svc-block:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.svc-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.svc-block-head .card-icon { margin-bottom: 0; }
.svc-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink-100);
}
.svc-title { margin-top: 1.35rem; font-size: 1.5rem; font-weight: 800; color: var(--ink-900); }
.card-list-2col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem 1rem; }
.card-list-2col li { font-size: .8125rem; }

/* --- feature cards (why us / values) --- */
.feature-card {
  position: relative;
  padding: 1.85rem 1.65rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.feature-num {
  position: absolute;
  top: 1.1rem; right: 1.35rem;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--brand-50);
}
.feature-card:hover .feature-num { color: var(--sun-100); }
.feature-title { font-size: 1.1875rem; font-weight: 800; color: var(--ink-900); line-height: 1.3; position: relative; }
.feature-text  { margin-top: .6rem; color: var(--ink-600); font-size: .9375rem; line-height: 1.7; }

/* --- steps (process) --- */
.step {
  position: relative;
  padding: 1.9rem 1.6rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-100);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-num {
  display: inline-grid;
  place-items: center;
  min-width: 2.9rem; height: 2.9rem;
  padding: 0 .6rem;
  border-radius: 1rem;
  background: var(--brand-500);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 8px 18px -8px rgba(43,138,240,.9);
}
.step-title { margin-top: 1.15rem; font-size: 1.2rem; font-weight: 800; color: var(--ink-900); }
.step-text  { margin-top: .55rem; color: var(--ink-600); font-size: .9375rem; line-height: 1.7; }

/* --- owner cards --- */
.owner-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.owner-avatar {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.owner-avatar-2 { background: linear-gradient(140deg, var(--sun-400), var(--coral-400)); color: var(--sun-900); }

/* --- portraits + gallery --- */
/* Built-in illustrations. The SVG carries preserveAspectRatio="slice" so it
   crops to fill the frame exactly like object-fit: cover. */
.art { display: block; width: 100%; height: 100%; overflow: hidden; }
.art > svg { display: block; width: 100%; height: 100%; }

.portrait-frame {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sun-100), var(--brand-100));
  box-shadow: var(--shadow-xl);
}
.portrait-frame-tall { aspect-ratio: 3 / 3.9; }
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.5);
  border-radius: inherit;
  pointer-events: none;
}
.gallery-tile {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-50);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.gallery-tag {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .4rem .9rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.94);
  color: var(--ink-800);
  font-size: .75rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

/* --- city chips / cards --- */
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 9999px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-700);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, color .2s;
}
.city-chip:hover { transform: translateY(-2px); border-color: var(--brand-300); color: var(--brand-700); box-shadow: var(--shadow); }
.city-chip svg { color: var(--coral-400); }
.city-chip-more {
  background: var(--sun-100);
  border-color: var(--sun-200);
  color: var(--sun-800);
  font-weight: 800;
}
.city-chip-static { cursor: default; }
.city-chip-static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--ink-100); color: var(--ink-700); }

.city-card {
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }

/* --- quotes --- */
.quote-card {
  position: relative;
  margin: 0;
  padding: 2.25rem 1.85rem 1.85rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.quote-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.quote-mark { display: block; color: var(--sun-300); margin-bottom: 1rem; }
.quote-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-700);
  font-weight: 600;
}
.quote-text::before { content: "\201C"; }
.quote-text::after  { content: "\201D"; }

/* --- FAQ --- */
.faq { padding: .25rem 0; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.4;
  transition: color .2s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--brand-700); }
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  background: var(--brand-50);
  transition: background-color .25s, transform .3s var(--ease);
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .8rem; height: 2.5px;
  margin: -1.25px 0 0 -.4rem;
  border-radius: 9999px;
  background: var(--brand-600);
  transition: transform .3s var(--ease);
}
.faq-toggle::after { transform: rotate(90deg); }
.faq[open] .faq-toggle { background: var(--sun-300); }
.faq[open] .faq-toggle::before, .faq[open] .faq-toggle::after { background: var(--sun-900); }
.faq[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-a { padding-bottom: 1.4rem; padding-right: 3rem; }
.faq-a p { color: var(--ink-600); line-height: 1.75; font-size: .9375rem; }

/* --- chips --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.chip-dark { background: rgba(255,255,255,.1); color: var(--brand-100); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* --- forms --- */
.form-card {
  padding: 2.25rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.field { display: block; }
.field > label,
.field > legend {
  display: block;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--ink-700);
  margin-bottom: .45rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* margin-INLINE only: a `margin: 0` shorthand here would outrank the form's
   `.space-y-5 > * + *` and squash this fieldset against the field above it. */
fieldset.field { border: 0; padding: 0; margin-inline: 0; }
.req { color: var(--coral-500); }

.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card select,
.form-card textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  border: 2px solid var(--ink-100);
  border-radius: .9rem;
  background: var(--cream);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-card textarea { resize: vertical; min-height: 8rem; }
.form-card input::placeholder, .form-card textarea::placeholder { color: var(--ink-400); font-weight: 500; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-300);
  box-shadow: 0 0 0 4px rgba(132,199,255,.28);
}
.form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235C5C53' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}
.field-hint { margin-top: .5rem; font-size: .75rem; color: var(--ink-400); line-height: 1.5; }

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem;
  border-radius: 9999px;
  border: 2px solid var(--ink-100);
  background: var(--cream);
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill:hover { border-color: var(--brand-200); }
.radio-pill:has(input:checked) { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-800); }
.radio-pill:has(input:checked) { box-shadow: inset 0 0 0 1px var(--brand-300); }

.check-pill {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: .9rem;
  background: var(--sun-50);
  border: 1px solid var(--sun-100);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--sun-900);
  cursor: pointer;
}
.check-pill input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--brand-500); flex-shrink: 0; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.6;
}
.alert-error {
  background: var(--coral-50);
  border: 1px solid var(--coral-200);
  color: var(--coral-800);
  margin-bottom: 1.75rem;
}

/* --- footer --- */
.site-footer { background: var(--ink-900); color: var(--brand-100); }
.footer-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--brand-500), var(--mint-500));
  padding: 4.5rem 0 5rem;
  text-align: center;
}
.footer-cta::before {
  content: "";
  position: absolute;
  width: 26rem; height: 26rem;
  top: -14rem; left: -6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
}
.footer-cta-sun {
  position: absolute;
  width: 16rem; height: 16rem;
  bottom: -9rem; right: -3rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,77,.55), rgba(255,212,77,0) 70%);
}
.footer-h {
  font-size: .8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sun-300);
}
.footer-link {
  font-size: .9375rem;
  color: rgba(217,239,255,.8);
  font-weight: 600;
  transition: color .2s, padding-left .2s;
}
.footer-link:hover { color: #fff; padding-left: .3rem; }

/* Footer link rows that contain an icon need a real tap target. The plain
   .footer-link padding is tuned for text-only links; a link with an icon can
   end up as little as 25px tall on desktop, which is under the 24px minimum
   and awkward to hit. */
.footer-link.inline-flex {
  min-height: 2.25rem;
  align-items: center;
}

/* --- brand logo --------------------------------------------------------- */
/* Height is set by a utility (h-11, h-12) on the element; this rule makes sure
   the width follows the true aspect ratio and the image can never stretch or
   force the header wider than the viewport. `flex: 0 0 auto` stops the header's
   flex row from resizing it, and max-width keeps it safe on a narrow phone. */
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}
.brand-logo[class*="h-11"] { height: 2.75rem; }
.brand-logo[class*="h-12"] { height: 3rem; }
.brand-logo[class*="h-10"] { height: 2.5rem; }

/* ── header lockup ────────────────────────────────────────────────────────
   The monogram is wider than it is tall (about 1.39:1), so a height-only rule
   leaves it narrow. Pairing it with the name as real text keeps the header
   balanced and matches the drawn mark it replaces. The name is text rather
   than an image so it stays crisp, selectable and accessible. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.brand-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}
/* "View Nu" on one line, then "CONSTRUCTION" beneath it, left-aligned to the
   same edge so the two lines read as one block. letter-spacing on the small
   line was previously adding trailing space that pushed it out of alignment. */
.brand-name-main {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-900);
}
.brand-name-main em { font-style: normal; color: var(--sun-600); }
.brand-name-sub {
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2em;
  color: var(--ink-500);
  margin-top: .3rem;
  /* The trailing letter-space would offset the left edge; pull it back so the
     two lines start at the same x. */
  margin-left: .2em;
}
@media (max-width: 359px) {
  /* Below this the name collides with the nav toggle. */
  .brand-name { display: none; }
}

/* --- floating call button (mobile) --- */
.call-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1.5rem;
  border-radius: 9999px;
  background: var(--brand-500);
  color: #fff;
  font-weight: 800;
  font-size: .9375rem;
  box-shadow: 0 16px 34px -12px rgba(43,138,240,.9);
  transition: transform .2s var(--ease), background-color .2s;
}
.call-fab:hover { transform: translateY(-2px); background: var(--brand-600); }
.call-fab svg { flex-shrink: 0; }
@media (max-width: 1023px) {
  body { padding-bottom: 4.5rem; }
}

/* --- touch targets (below md, where a phone is the likely device) ---
   WCAG 2.2 SC 2.5.8 asks for at least 24x24 CSS px of pointer target. The
   top-bar phone button measured 31px tall and the footer links 20px, which is
   fiddly to hit with a thumb. Both are widened here; above md the desktop
   spacing is left alone. */
@media (max-width: 767px) {
  .topbar { height: 3rem; }
  .topbar-phone { min-height: 2.75rem; }
  .footer-link { display: inline-block; padding: .5rem 0; }
}

/* ---------------------------------------------------------------------------
   DISPLAY OVERRIDES  (must stay after the component layer)
   ---------------------------------------------------------------------------
   The utilities layer sits ABOVE the component layer so components can style
   themselves, but that means a component's own `display` beats a utility of
   equal specificity: `.btn { display: inline-flex }` used to win against
   `.hidden { display: none }`, so `hidden sm:inline-flex` on a button still
   rendered on phones and overflowed the header.

   `.hidden` is therefore declared down here, after every component. The
   sm:/md:/lg: display utilities live in the responsive section below and
   come later still, so `hidden lg:flex` correctly shows the nav at >=1024px
   and hides it below. Keep this rule below the components and above the
   responsive block. */
.hidden { display: none; }

/* ---------------------------------------------------------------------------
   5. REVEAL ON SCROLL
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (min-width: 640px) { /* sm */
  .sm\:block        { display: block; }
  .sm\:flex         { display: flex; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:inline-flex  { display: inline-flex; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:gap-3  { gap: .75rem; }
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-5  { gap: 1.25rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:px-8   { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-20  { padding-top: 5rem; padding-bottom: 5rem; }
.sm\:pt-12  { padding-top: 3rem; }
.sm\:pb-20  { padding-bottom: 5rem; }
  .sm\:p-8    { padding: 2rem; }
  .sm\:w-auto { width: auto; }
  .sm\:h-12   { height: 3rem; }
  .sm\:text-lg    { font-size: 1.125rem; line-height: 1.7; }
  .sm\:text-xl    { font-size: 1.25rem; line-height: 1.6; }
  .sm\:text-2xl   { font-size: 1.5rem; line-height: 1.4; }
  .sm\:text-4xl   { font-size: 2.25rem; line-height: 1.15; }
  .sm\:text-5xl   { font-size: 3rem; line-height: 1.08; }
  .sm\:text-6xl   { font-size: 3.75rem; line-height: 1.05; }
  .form-card   { padding: 2.75rem 2.5rem; }
  .quote-card  { padding: 2.5rem 2.25rem 2.25rem; }
  .card        { padding: 2.25rem 2rem; }
}

@media (min-width: 768px) { /* md */
  .md\:inline-flex { display: inline-flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section { padding: 6rem 0; }
  .section-title { font-size: 2.85rem; }
  .page-hero { padding: 5.5rem 0 6.5rem; }
  .footer-cta { padding: 5.5rem 0 6rem; }
}

@media (min-width: 1024px) { /* lg */
  .lg\:hidden       { display: none; }
  .lg\:flex         { display: flex; }
  .lg\:inline-flex  { display: inline-flex; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:col-span-4  { grid-column: span 4 / span 4; }
  .lg\:col-span-5  { grid-column: span 5 / span 5; }
  .lg\:col-span-6  { grid-column: span 6 / span 6; }
  .lg\:col-span-7  { grid-column: span 7 / span 7; }
  .lg\:col-start-6 { grid-column-start: 6; }
  .lg\:order-1     { order: 1; }
  .lg\:order-2     { order: 2; }
  .lg\:gap-10  { gap: 2.5rem; }
  .lg\:gap-12  { gap: 3rem; }
  .lg\:gap-16  { gap: 4rem; }
  .lg\:py-28  { padding-top: 7rem; padding-bottom: 7rem; }
.lg\:pt-16  { padding-top: 4rem; }
.lg\:pb-28  { padding-bottom: 7rem; }
  .lg\:text-5xl { font-size: 3rem; line-height: 1.08; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
  .section-title { font-size: 3.1rem; }
  .section { padding: 7rem 0; }
  /* A square image at 588px made the hero 846px tall and left the headline
     sitting 425px down a 900px viewport, with the text column floating in the
     middle of the art column. 4/3 keeps it substantial without dominating. */
  .hero-art { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   7. PRINT + REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .footer-cta, .call-fab, .skip-link, .form-card { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}