/* Ja-Lee landing page.
 *
 * Warm trust palette, matching the portal's brand tokens (assets/css/app.css
 * in the portal), light and dark. Every text and control pairing clears WCAG
 * AA in both schemes; the figures are next to the tokens that need them.
 *
 * The glass card sits over a moving 3D scene, so its opacity is chosen for
 * the worst case — pure black (light) or pure white (dark) straight under
 * the card — rather than for the scene we happen to draw today:
 *   light: ink on glass 7.5:1, muted 5.0:1 (glass .72 over black)
 *   dark:  ground on glass 7.3:1, muted 5.2:1 (glass .78 over white)
 * The focus ring is ink/ground, not amber, because amber on cream misses 3:1.
 */
:root{
  --ink:#112230;
  --ink-soft:#2C3F50;
  --ground:#FAF5ED;
  --ground-deep:#EFE7D9;
  --accent:#E1973E;       /* buttons: ink text 6.7:1 */
  --accent-deep:#C9732F;  /* button hover: ink text 4.6:1 */

  --text:var(--ink);
  --muted:var(--ink-soft);               /* 8.8:1 on the panel */
  --focus:var(--ink);
  --bg:var(--ground);
  --line:#DAD3C7;                        /* decorative hairlines only */
  --panel:var(--ground-deep);
  --panel-edge:#DAD3C7;
  --field:var(--ground);
  --field-edge:#677784;                  /* 3.8:1 on the panel, 4.3:1 on the field (1.4.11) */
  --danger:#A93A2C;                      /* 5.1:1 on the panel */
  --success:#2E6A4B;                     /* 5.2:1 on the panel */
  --status-bg:var(--ground);
  --footer-bg:var(--ground-deep);
  --glass:rgba(250,245,237,.72);
  --glass-solid:rgba(250,245,237,.94);
  --glass-edge:rgba(255,255,255,.62);
  --glass-shine:rgba(255,255,255,.7);
  --glass-shadow:rgba(17,34,48,.32);
  --panel-shadow:rgba(17,34,48,.14);
  --radius:0.25rem;
  --gutter:clamp(1rem,4vw,3rem);
  --dur-hover:120ms;
  --dur-press:160ms;
  --font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-scheme="light"]){
    --text:var(--ground);
    --muted:rgba(250,245,237,.8);        /* 7.1:1 on the panel */
    --focus:var(--ground);
    --bg:var(--ink);
    --line:rgba(250,245,237,.16);
    --panel:var(--ink-soft);
    --panel-edge:rgba(250,245,237,.14);
    --field:#1E303F;
    --field-edge:#8C969E;                /* 3.6:1 on the panel, 4.5:1 on the field */
    --danger:#F0A095;                    /* 5.3:1 on the panel */
    --success:#72BD93;                   /* 4.9:1 on the panel */
    --status-bg:var(--ink);
    --footer-bg:#0B1824;
    --glass:rgba(17,34,48,.78);
    --glass-solid:rgba(17,34,48,.95);
    --glass-edge:rgba(250,245,237,.16);
    --glass-shine:rgba(250,245,237,.12);
    --glass-shadow:rgba(0,0,0,.55);
    --panel-shadow:rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-scheme="dark"]{
  --text:var(--ground);
  --muted:rgba(250,245,237,.8);
  --focus:var(--ground);
  --bg:var(--ink);
  --line:rgba(250,245,237,.16);
  --panel:var(--ink-soft);
  --panel-edge:rgba(250,245,237,.14);
  --field:#1E303F;
  --field-edge:#8C969E;
  --danger:#F0A095;
  --success:#72BD93;
  --status-bg:var(--ink);
  --footer-bg:#0B1824;
  --glass:rgba(17,34,48,.78);
  --glass-solid:rgba(17,34,48,.95);
  --glass-edge:rgba(250,245,237,.16);
  --glass-shine:rgba(250,245,237,.12);
  --glass-shadow:rgba(0,0,0,.55);
  --panel-shadow:rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--text);text-decoration-thickness:0.0625rem;text-underline-offset:0.2em}
a:focus-visible{outline:0.1875rem solid var(--focus);outline-offset:0.1875rem;border-radius:var(--radius)}
h1,h2{font-weight:600;line-height:1.1;letter-spacing:-0.015em}
.rule{width:3.5rem;height:0.25rem;margin:0 0 1.25rem;background:var(--accent);border-radius:var(--radius)}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  min-height:2.75rem;padding:0.6875rem 1.375rem;
  border:0;border-radius:var(--radius);
  font:600 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-hover) ease-out, transform var(--dur-press) ease-out;
}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn:active{transform:translateY(0.0625rem)}
.btn:focus-visible{outline:0.1875rem solid var(--focus);outline-offset:0.1875rem}
.btn[disabled]{cursor:progress;opacity:.75}
.btn[hidden]{display:none}

/* ── logo, upper left, over the hero ── */
.site-header{position:absolute;top:0;left:0;z-index:2;padding:var(--gutter)}
.brand{display:inline-block;line-height:0;border-radius:var(--radius)}
.brand img{width:clamp(8.5rem,15vw,11.5rem);height:auto}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-scheme="light"]) .logo-light{display:none}
  :root:not([data-scheme="light"]) .logo-dark{display:block}
}
:root[data-scheme="dark"] .logo-light{display:none}
:root[data-scheme="dark"] .logo-dark{display:block}

/* ── hero: exactly one viewport, scene behind ── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:grid;
  /* room at the top for the logo */
  padding:calc(var(--gutter) * 2 + 3rem) var(--gutter) var(--gutter);
  background:var(--scene-bg,var(--bg));
}
.scene{position:absolute;inset:0;z-index:-1}
.scene canvas{
  display:block;width:100%;height:100%;
  opacity:0;transition:opacity 1.2s ease-out;
}
.scene.is-ready canvas{opacity:1}

/* ── "Tilt to explore": only on iPhone and iPad, which ask before sharing tilt ── */
.tilt-toggle{
  position:absolute;top:var(--gutter);right:var(--gutter);z-index:2;
  display:inline-flex;align-items:center;gap:0.4375rem;
  min-height:2.75rem;padding:0.5rem 0.875rem;
  font:500 0.875rem/1.2 var(--font);color:var(--text);
  background:var(--glass);
  border:0.0625rem solid var(--glass-edge);border-radius:var(--radius);
  box-shadow:0 0.75rem 1.5rem -1rem var(--glass-shadow);
  -webkit-backdrop-filter:blur(0.75rem);backdrop-filter:blur(0.75rem);
  cursor:pointer;
}
.tilt-toggle[hidden]{display:none}
.tilt-toggle:focus-visible{outline:0.1875rem solid var(--focus);outline-offset:0.1875rem}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tilt-toggle{background:var(--glass-solid)}
}

/* ── the glass card, a little left of centre ── */
.hero-body{
  align-self:center;
  width:min(100%,27rem);
  /* right edge sits 4vw short of the middle on wide screens */
  margin-inline-start:max(0rem,calc(50vw - 27rem - 4vw - var(--gutter)));
}
.card{
  position:relative;
  padding:clamp(1.75rem,3.2vw,2.5rem);
  background:var(--glass);
  border:0.0625rem solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:0 1.75rem 3.5rem -1.75rem var(--glass-shadow), inset 0 0.0625rem 0 var(--glass-shine);
  -webkit-backdrop-filter:blur(1.125rem) saturate(1.35);
  backdrop-filter:blur(1.125rem) saturate(1.35);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card{background:var(--glass-solid)}
}
.card h1{margin:0 0 0.75rem;font-size:clamp(2rem,4.2vw,3rem)}
.card-cta{margin:0 0 1.25rem}
.card p{margin:0;color:var(--muted);font-size:1.0625rem}

/* ── Email us ── */
.contact{
  padding:clamp(3.5rem,9vw,7rem) var(--gutter);
  scroll-margin-top:0;
}
.contact-inner{
  max-width:68rem;margin:0 auto;
  display:grid;gap:clamp(1.75rem,5vw,4.5rem);
}
.contact-intro h2{margin:0 0 0.75rem;font-size:clamp(1.75rem,3.4vw,2.5rem)}
.contact-intro p{margin:0;max-width:26rem;color:var(--muted);font-size:1.0625rem}
.contact-panel{
  min-width:0;
  padding:clamp(1.25rem,3.5vw,2.25rem);
  background:var(--panel);
  border:0.0625rem solid var(--panel-edge);
  border-radius:var(--radius);
  box-shadow:0 1.25rem 2.5rem -1.75rem var(--panel-shadow);
}
.form-note{margin:0 0 1.25rem;color:var(--muted);font-size:0.9375rem}
.field{margin:0 0 1.25rem}
.field label{display:block;margin:0 0 0.375rem;font-weight:500}
.field input,
.field textarea{
  display:block;width:100%;min-height:2.75rem;margin:0;
  padding:0.6875rem 0.875rem;
  font:inherit;font-size:1rem;line-height:1.5;color:var(--text);
  background:var(--field);
  border:0.0625rem solid var(--field-edge);
  border-radius:var(--radius);
  transition:border-color var(--dur-hover) ease-out;
}
.field textarea{min-height:10rem;resize:vertical}
.field input:focus-visible,
.field textarea:focus-visible{outline:0.1875rem solid var(--focus);outline-offset:0.0625rem}
.field.has-error input,
.field.has-error textarea{border-color:var(--danger);box-shadow:inset 0 0 0 0.0625rem var(--danger)}
.field-error{margin:0.375rem 0 0;color:var(--danger);font-size:0.9375rem;font-weight:500}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1rem;min-height:2.75rem}
.send-hint{margin:0;color:var(--muted);font-size:0.9375rem}
.send-hint[hidden]{display:none}
.form-status{
  margin:0 0 1.25rem;padding:0.875rem 1rem;
  background:var(--status-bg);color:var(--text);font-weight:500;
  border-left:0.25rem solid;border-radius:var(--radius);
}
.form-status:focus{outline:none}
.form-status.is-ok{border-left-color:var(--success)}
.form-status.is-error{border-left-color:var(--danger)}
.form-status + .contact-form .form-note{margin-top:0}

/* two columns once there's room: the invitation beside the form */
@media (min-width:56rem){
  .contact-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .contact-intro{padding-top:0.5rem}
}

/* ── footer ── */
.site-footer{background:var(--footer-bg);border-top:0.0625rem solid var(--line)}
.footer-inner{max-width:68rem;margin:0 auto;padding:1.5rem var(--gutter)}
.footer-inner p{margin:0;color:var(--muted);font-size:0.9375rem}

@media (hover:hover) and (pointer:fine){
  .card a:not(.btn):hover{text-decoration-thickness:0.125rem}
  .btn-primary:hover{background:var(--accent-deep)}
  .field input:hover,
  .field textarea:hover{border-color:var(--text)}
}

/* ── phones and portrait tablets: house above, card below ── */
@media (max-width:47.99rem), (max-aspect-ratio:1/1){
  .hero-body{align-self:end;justify-self:center;margin:0 0 0.5rem}
}

@media (prefers-reduced-motion:reduce){
  .scene canvas{transition:none}
  .btn{transition:none}
  .btn:active{transform:none}
}

/* ── backdrops behind each scene (and the whole picture if WebGL is off) ── */
.hero[data-variant="a"]{--scene-bg:radial-gradient(120% 95% at 68% 42%,#FDF9F3 0%,#F0E8DB 52%,#E0D5C3 100%)}
.hero[data-variant="b"]{--scene-bg:#F4EEE3}
.hero[data-variant="c"]{--scene-bg:radial-gradient(110% 90% at 66% 45%,#FBF7F0 0%,#EFE7D9 60%,#E3D9C8 100%)}
.hero[data-variant="d"]{--scene-bg:linear-gradient(#C9D7DF 0%,#E4E3DA 55%,#F1E9DB 100%)}
@media (prefers-color-scheme: dark){
  :root:not([data-scheme="light"]) .hero[data-variant="a"]{--scene-bg:radial-gradient(120% 95% at 68% 40%,#243A4E 0%,#15283A 50%,#0A1622 100%)}
  :root:not([data-scheme="light"]) .hero[data-variant="b"]{--scene-bg:#112230}
  :root:not([data-scheme="light"]) .hero[data-variant="c"]{--scene-bg:radial-gradient(110% 90% at 66% 45%,#20364A 0%,#132536 60%,#0B1824 100%)}
  :root:not([data-scheme="light"]) .hero[data-variant="d"]{--scene-bg:linear-gradient(#08121C 0%,#15293B 60%,#2A3E52 100%)}
}
:root[data-scheme="dark"] .hero[data-variant="a"]{--scene-bg:radial-gradient(120% 95% at 68% 40%,#243A4E 0%,#15283A 50%,#0A1622 100%)}
:root[data-scheme="dark"] .hero[data-variant="b"]{--scene-bg:#112230}
:root[data-scheme="dark"] .hero[data-variant="c"]{--scene-bg:radial-gradient(110% 90% at 66% 45%,#20364A 0%,#132536 60%,#0B1824 100%)}
:root[data-scheme="dark"] .hero[data-variant="d"]{--scene-bg:linear-gradient(#08121C 0%,#15293B 60%,#2A3E52 100%)}