* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html, body {
  color: #1a2373;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: linear-gradient(
    /*to left bottom,
    #e28d30, #e69738, #e9a140, #edab48,
    #f0b551, #eab04f, #e3ab4e, #dda64c,
    #cb9240, #b97e34, #a76b28, #94581d */
    /*to left bottom,
    #e28d30, #e29435, #e29b3a, #e2a140,
    #e2a846, #dca344, #d59e43, #cf9941,
    #c18837, #b2782e, #a36825, #94581d */
   /*to left bottom,
    #8e5322, #975c27, #a0662c, #a97032,
    #b27a37, #ac7635, #a77333, #a16f31,
    #8c5d27, #764b1d, #613a14, #4d2a0a */
   /*to left top,
    #d2a876, #c89f6e, #bf9566, #b58c5f,
    #ac8357, #a57b4e, #9d7446, #966c3d,
    #8f6431, #875d24, #7f5516, #774e04*/
   /*to top,
   #4d2a0a, #613a14, #764b1d, #8c5d27,
   #a16f31, #9e6c31, #9c6a32, #996732,
   #7d5028, #623b1f, #472815, #2d1606 */
   to right,
   #2b433e, #2a4b34, #3c4f1f, #3c4c24,
   #802a00, #943721, #9f2b2b, #a03d3d,
   #7b3f3f, #53497e, #354e73, #2e4d60
  ) fixed no-repeat;
  background-attachment: fixed;
}

:root{
  --text:  #1a2373;
  --muted: #3f4a9a;
  --line:  #e9e3db;
  --brand: #1a2373;
  --accent:#2e7d32;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  /* --shimmer-intensity: .42; */
  --shimmer-intensity: .52;
  /* --shimmer-speed: 14s; */
  --shimmer-speed: 124s;
  /* --shimmer-scale: 1.0; */
  --shimmer-scale: 1.28;
  /* --shimmer-color: #f9d07f; */
  /* --shimmer-color: #fbf7b5; */
  --shimmer-color: #f5f2c3;
  /* --refl: 36%; */
  --refl: 44%;
  /* --reflect-lift: 28px; */
  --reflect-lift: 240px;
  --shimmer-lift: 550px;
}

.container { width: min(1100px, 92vw); margin: 0 auto; }

.site-header{
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: #1a2373; color: #dacab8;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ text-decoration:none; color: var(--text); font-weight:700; }
.brand-name{ color:#dacab8; letter-spacing: .2px; }
.nav{ display:flex; align-items:center; gap:18px; }
.nav a{ color:#dacab8; text-decoration:none; font-weight:700; }
.nav a:hover{ opacity:.8; }

.splash{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vh 4vw;
  isolation: isolate;
}

/*.splash::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  opacity: var(--shimmer-intensity);
  background:
    radial-gradient(130% 60% at 50% 12%, rgba(255,255,255,.18), transparent 60%),
    conic-gradient(from 0deg at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 30% 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 10px);
  mix-blend-mode: soft-light;
  transform: translate3d(0,0,0) scale(var(--shimmer-scale));
  animation: shimmer-pan var(--shimmer-speed) ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
  filter: url(#waterCaustics);
  /* filter: url(#causticsLight); */
  /* -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,1) 14%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,1) 14%);
}

@keyframes shimmer-pan{
  0%   { transform: translate3d(-6%, -2%, 0) scale(var(--shimmer-scale)) rotate(-.2deg); }
  100% { transform: translate3d( 6%,  2%, 0) scale(var(--shimmer-scale)) rotate(.2deg); }
} */

.splash::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;

  /* make it easier to see */
  opacity: var(--shimmer-intensity);

  /* A tinted light field the filter will refract */
  background:
    radial-gradient(130% 60% at 50% 12%, color-mix(in srgb, var(--shimmer-color) 48%, transparent), transparent 60%),
    conic-gradient(from 0deg at 50% 20%, color-mix(in srgb, var(--shimmer-color) 26%, transparent), transparent 30% 100%),
    repeating-linear-gradient(115deg, color-mix(in srgb, var(--shimmer-color) 18%, transparent) 0 2px, transparent 2px 10px);

  /* Blend *with the page* to brighten highlights (more dramatic than soft-light) */
  mix-blend-mode: screen;

  /* slow pan across the surface; scale lets you zoom the caustics */
  transform: translate3d(0,0,0) scale(var(--shimmer-scale));
  animation: shimmer-pan var(--shimmer-speed) ease-in-out infinite alternate;

  /* irregular motion via animated turbulence (defined in the pages <svg>) */
  will-change: transform, opacity, filter;
  filter: url(#waterCaustics) brightness(1.22) contrast(1.12) saturate(1.15);

  /* keep the very top calmer under the header */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,1) 14%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,1) 14%);
}

@keyframes shimmer-pan{
  0%   { transform: translate3d(-4%, -1%, 0) scale(var(--shimmer-scale)) rotate(-.15deg); }
  100% { transform: translate3d( 4%,  1%, 0) scale(var(--shimmer-scale)) rotate(.15deg); }
}

.reflect-wrap{
  position: relative; display: inline-block; z-index:1;
  padding-bottom: var(--refl);
  overflow: visible;
}
.logo-src{
  position: relative;
  z-index: 1;
  display:block;
  max-width: clamp(260px, 40vw, 520px);
  height:auto;
}
.logo-reflection{
  position:absolute;
  top: calc(100% - var(--reflect-lift));
  left: 0;
  transform: scaleY(-1);
  transform-origin: top;
  max-width: clamp(260px, 40vw, 520px);
  height:auto;
  /* opacity:.6; */
  opacity:.7;
  filter: blur(.5px);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 75%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 75%);
}
.reflect-wrap::after{
  content:"";
  position:absolute;
  /* left:-12%; right:-12%; */
  left: calc(50% - 50vw);
  width: 100vw;
  right: auto;
  top: calc(100% - var(--reflect-lift) - var(--shimmer-lift));
  height: var(--refl);
  pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 35% at 50% 12%, rgba(255,255,255,.22), transparent 60%),
    conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 34% 100%);
  mix-blend-mode: soft-light;
  opacity:.52;
  filter: blur(2px) saturate(118%);
  animation: water-shimmer 7s ease-in-out infinite alternate;
  will-change: transform, filter, opacity;
}

@keyframes water-shimmer{
  0%   { transform: translateX(-10%) translateY(0) skewX(-3deg); filter: blur(1px); }
  100% { transform: translateX( 10%) translateY(3%) skewX( 3deg); filter: blur(3px); }
}

.section{ padding:56px 0; }
.contact-wrap{ display:grid; gap:24px; grid-template-columns:1.2fr 1fr; align-items:start; }
@media (max-width:980px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-form{
  background:#1a2373; color:#dacab8;
  border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow);
}
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:600; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:12px 12px; border-radius:10px;
  border:1px solid var(--line); background:#dacab8; color:#222;
}
.field.checkbox{ display:flex; align-items:center; gap:10px; }
.field.checkbox input{ width:18px; height:18px; }
.btn{
  display:inline-block; width:100%; padding:12px 14px; border-radius:12px; border:0;
  background: linear-gradient(180deg, #66bb6a, #43a047); color:#fff; font-weight:800; cursor:pointer;
}
.btn:hover{ filter: brightness(1.05); }
.thanks{ margin-top:10px; color:#2e7d32; font-weight:600; }
.site-footer{ border-top:1px solid var(--line); padding:22px 0; margin-top:32px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; }
.footer-cta{
  text-decoration:none; color:#1a2373; font-weight:700; border:1px solid var(--line);
  padding:8px 12px; border-radius:10px; background:#dacab8;
}

@media (prefers-reduced-motion: reduce){
  .splash::before,
  .reflect-wrap::after { animation: none; }
}
@media (max-width: 600px){
  :root{ --shimmer-intensity: .26; --refl: 24%; --reflect-lift: 172px; }
}

/* The following is all stuff designed to limit the shimmer band to the logo reflection */
/* 1) Disable the full-height shimmer */
.splash::before { content: none !important; }

/* 2) Ensure the wrapper is positioned and has space reserved for the reflection */
.reflect-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: var(--refl); /* you already set --refl; keep it */
  z-index: 1;
}

/* 3) Band-limited shimmer: same effect, just confined to the reflection region */
.reflect-wrap::after{
  content:"";
  position:absolute;
  left:-10%;                     /* tiny overhang for a natural edge */
  right:-10%;
  top: calc(100% - var(--reflect-lift));   /* start exactly where the reflection starts */
  height: var(--refl);                     /* same height as the reflection band */
  pointer-events:none;
  z-index: 3;                     /* above the reflection highlights */

  /* Use the SAME light-field you had in your working .splash::before */
  background:
    radial-gradient(130% 60% at 50% 12%, rgba(255,255,255,.18), transparent 60%),
    conic-gradient(from 0deg at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 30% 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 10px);
  mix-blend-mode: soft-light;

  /* Slower and wider “waves” so it’s calm and legible */
  transform: translate3d(0,0,0) scale(3.0);
  animation: shimmer-pan 36s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;

  /* Keep the irregular motion you already had */
  filter: url(#waterCaustics) brightness(1.12) contrast(1.06) saturate(1.08);
}

/* Make sure the logo can sit below, and the reflection can sit under/over it cleanly */
.logo-src{
  position: relative;
  z-index: 1;
}
.logo-reflection{
  position:absolute;
  top: calc(100% - var(--reflect-lift));  /* you already set --reflect-lift: 240px; */
  left: 0;
  transform: scaleY(-1);
  transform-origin: top;
  max-width: clamp(260px, 40vw, 520px);
  height:auto;
  opacity:.6;
  filter: blur(.5px);
  pointer-events:none;
  z-index: 2;  /* reflection under the shimmer band */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 75%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 75%);
}

/* What follows is more recommended changes by ChatGPT. */
/* === Positioning overrides for the shimmer band === */

/* 1) A simple knob to raise the band relative to the reflection start */
:root{
  --band-lift: 350px; /* increase/decrease to move the band up/down */
}

/* 2) Make sure nothing clips it as we move it upward or outward */
.splash, .reflect-wrap { overflow: visible; }

/* 3) Override ONLY the placement/size. Leave your existing backgrounds/animation alone. */
.splash .reflect-wrap::after{
  /* Put the band ~350px ABOVE the reflection start */
  top: calc(100% - var(--reflect-lift) - var(--band-lift)) !important;
  height: var(--refl) !important;

  /* Full-bleed width, centered on viewport (no side truncation) */
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  right: auto !important;

  /* Keep it above the reflection but below the header */
  z-index: 4 !important;
  pointer-events: none;
}

/* More code to create a static border at the top of the shimmer */
/* ===== Shimmer: add a static top border & hard cutoff ===== */

/* Tweakables */
:root{
  --shimmer-top-gap: 18px;              /* empty space ABOVE the waves (0–30px) */
  --shimmer-border-thickness: 2px;      /* visible border line at the cutoff */
  --shimmer-border-color: rgba(249,208,127,.65); /* warm highlight; adjust to taste */
}

/* Keep shimmer full-bleed + lifted (from your working overrides) */
.splash, .reflect-wrap { overflow: visible; }

/* 1) HARD CUTOFF: mask the top of the band so waves never cross it */
.splash .reflect-wrap::after{
  /* existing placement from your working overrides should already be here:
     top: calc(100% - var(--reflect-lift) - var(--band-lift)) !important;
     height: var(--refl) !important;
     left: 50% !important; width: 100vw !important; margin-left: -50vw !important;
     right: auto !important; z-index: 4 !important; */

  /* Make the top 'gap' transparent, then fully opaque—creates a crisp edge. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--shimmer-top-gap),
    rgba(0,0,0,1) var(--shimmer-top-gap)
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--shimmer-top-gap),
    rgba(0,0,0,1) var(--shimmer-top-gap)
  );
}

/* 2) VISIBLE STATIC BORDER: a thin line at the cutoff for an obvious edge */
.splash .reflect-wrap::before{
  content:"";
  position:absolute;
  /* Align the border with the band’s top (same calc as ::after 'top', no gap) */
  top: calc(100% - var(--reflect-lift) - var(--band-lift));
  /* Full-bleed so it never truncates left/right */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: var(--shimmer-border-thickness);
  background: linear-gradient(to bottom, var(--shimmer-border-color), rgba(249,208,127,0));
  mix-blend-mode: screen;    /* subtle glow on warm background */
  pointer-events: none;
  z-index: 5;                /* above shimmer band */
}

/* --- Remove the visible border line --- */
.splash .reflect-wrap::before{ display:none !important; }

/* --- Raise the static cutoff (waterline) --- */
/* Smaller gap = cutoff sits higher within the band */
:root{ --shimmer-top-gap: 2px; }   /* was 18px; try 4–10px to taste */

/* Ensure our mask override wins */
.splash .reflect-wrap::after{
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--shimmer-top-gap),
    rgba(0,0,0,1) var(--shimmer-top-gap)
  ) !important;
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--shimmer-top-gap),
    rgba(0,0,0,1) var(--shimmer-top-gap)
  ) !important;
}
/* More ChatGPT adjustments */
/* Keep anything from clipping the band as it goes full-bleed */
.splash, .reflect-wrap { overflow: visible; }

/* Remove the old pseudo-element band, if present */
.splash .reflect-wrap::after { content: none !important; }
.splash .reflect-wrap::before { display: none !important; }

/* Position knobs */
:root{
  /* You already set --reflect-lift (e.g., 240px). Keep it. */
  --band-lift: 420px;   /* raise/lower shimmer relative to reflection start */
  --refl: 44%;          /* reflection band height (already set; keep or tweak) */
  --shimmer-scale: 3.0; /* ~3× wider waves */
  --band-speed: 40s;    /* slower drift */
}

/* Static viewport with a hard, straight waterline (no scallops) */
.shimmer-band{
  position: absolute;
  /* align to reflection start & lift upward by --band-lift */
  top: calc(100% - var(--reflect-lift) - var(--band-lift));
  height: var(--refl);

  /* full-bleed horizontally, centered on viewport */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;

  z-index: 4;          /* above the reflection */
  pointer-events: none;
  overflow: hidden;    /* <-- this creates the static top border */
}

/* The moving shimmer lives INSIDE the viewport, so its top is clipped straight */
.shimmer-band::before{
  content: "";
  position: absolute; inset: 0;

  /* this is the same “light field” you already liked */
  background:
    radial-gradient(130% 60% at 50% 12%, rgba(255,255,255,.18), transparent 60%),
    conic-gradient(from 0deg at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 30% 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 10px);
  mix-blend-mode: soft-light;

  transform: translate3d(0,0,0) scale(var(--shimmer-scale));
  animation: shimmer-pan var(--band-speed) ease-in-out infinite alternate;
  will-change: transform, opacity, filter;

  /* irregular motion (your inline SVG #waterCaustics) */
  filter: url(#waterCaustics) brightness(1.12) contrast(1.06) saturate(1.08);
}

/* Make sure the reflection can overlap the logo cleanly */
.logo-src{ position: relative; z-index: 1; }
.logo-reflection{ position:absolute; z-index: 2; }

/* Make the reflected logo darker */
/* Make the reflected logo darker & crisper */
.logo-reflection{
  /* order matters: tune darkness/contrast first, then a small blur, then shadow */
  filter:
    brightness(.70)   /* darker (0.65–0.80 range) */
    contrast(1.22)    /* punchier edges (1.1–1.35) */
    saturate(.92)     /* tame color a touch */
    blur(.4px)
    drop-shadow(0 -3px 8px rgba(0,0,0,.28)); /* soft darkening halo */
}

/* If you want it even darker without fading, add multiply blending: */
@media (prefers-contrast: more){
  .logo-reflection{ mix-blend-mode: multiply; }
}
/* Or force it always (stronger effect): */
/* .logo-reflection{ mix-blend-mode: multiply; } */

/* Keep the blue */
/* Stronger, clearer reflection without changing its color */
.logo-reflection{
  /* make the reflection itself more present (not darker) */
  opacity: .94 !important;           /* try .92 – .97 */

  /* keep edges tidy; you can lower/raise the blur slightly */
  filter: blur(.35px) !important;

  /* fade-out starts near fully opaque, then eases to 0 toward the bottom */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,                 /* fully visible at the top of the reflection */
    rgba(0,0,0,.95) 28%,              /* still very present */
    rgba(0,0,0,0) 86%                 /* taper off further down */
  ) !important;
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.95) 28%,
    rgba(0,0,0,0) 86%
  ) !important;
}
/* ChatGPT's solution for raising the contact section */
/* Raise the contact section closer to the shimmer */
:root{
  --contact-lift: 200px;   /* change this to taste */
  --header-offset: 72px;   /* approx sticky header height; tweak if needed */
}

/* Pull the whole section up */
#contact.section{
  margin-top: calc(-1 * var(--contact-lift));
}

/* Make in-page link (#contact) account for the lift + sticky header */
#contact{
  scroll-margin-top: calc(var(--header-offset) + var(--contact-lift));
}

/* Optional: on small screens, lift a bit less */
@media (max-width: 600px){
  :root{ --contact-lift: 140px; }
}