/* ==========================================================================
   SEYE — base layer
   Design reference: Lanhu artboard 1920px  ·  1rem = 16px @ 1920
   Adaptation: CSS REM  →  root font-size = min(16px, 100vw / 120)
   ========================================================================== */

/* ---------- ampersand patch -------------------------------------------------
   Playfair Display ships an ornate swash “&” that differs from the design
   reference. This 800-byte subset supplies a plain serif ampersand and is
   scoped to U+0026 only, so the rest of the glyph set still comes from
   Playfair Display. */
@font-face{
  font-family:'Serif Amp';
  src:url('../fonts/amp.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0026;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* 1920 / 16 = 120  →  100vw / 120 = 16px at 1920px viewport */
  font-size:calc(100vw / 120);
  scroll-behavior:smooth;
  scroll-padding-top:6.5rem;
}
@media (min-width:1920px){ html{font-size:16px} }
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid #7fb69a;outline-offset:3px}

/* ---------- tokens ---------- */
:root{
  --cream:#fefff9;
  --cream-2:#f7f8f2;
  --green:#244a36;
  --green-deep:#1f3d2f;
  --green-soft:#dfe7e0;
  --ink:#244a36;
  --sage:#5a7766;
  --olive:#b4a078;
  --page:120rem;              /* 1920 */
  --container:109rem;         /* 1744 */
  --container-wide:110rem;    /* 1760 */
  --gutter:5rem;              /* 80  */
  --nav-h:5.9375rem;          /* 95  */
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --serif:'Serif Amp','Playfair Display','Songti SC','Noto Serif SC',Georgia,serif;
}

/* ---------- page ---------- */
html,body{background:var(--cream)}
body{
  font-family:var(--sans);
  color:var(--ink);
  overflow-x:hidden;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* every full-bleed <section> keeps its own background; .wrap centres the 1920 canvas */
.wrap{width:100%;max-width:var(--page);margin-inline:auto;position:relative}

/* ---------- layout helpers ---------- */
.container{width:var(--container);margin-left:var(--gutter)}
.container-wide{width:var(--container-wide);margin-left:var(--gutter)}
.container-center{width:var(--container);margin-inline:auto}

/* ---------- mobile / tablet: stop the 1920 canvas, go fluid ---------- */
@media (max-width:1023.98px){
  html{font-size:16px}
  :root{--gutter:1.25rem}
  .wrap{max-width:none}
  .container,.container-wide,.container-center{width:auto;margin-inline:var(--gutter)}
  .container,.container-wide{margin-left:var(--gutter)}
  .h2.xl{font-size:clamp(1.75rem,7vw,2.5rem);line-height:1.12}
}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f6144,#8fd0ab);box-shadow:0 0 12px rgba(143,208,171,.7)}
.scroll-progress{transition:transform .4s ease}

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow{
  font-size:1.1875rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:#4b5f50;
}
.eyebrow.light{color:rgba(255,255,255,.86)}
.eyebrow.olive{color:var(--olive)}

.h2{
  font-family:var(--serif);font-weight:600;
  font-size:4.1875rem;line-height:.96;letter-spacing:.026em;
  color:var(--green);
}
.h2.light{color:#fff}
.h2.xl{font-size:5.72rem;line-height:1.05;letter-spacing:0}

.h1{
  font-family:var(--serif);font-weight:600;line-height:.98;
  font-size:4.75rem;letter-spacing:0;color:var(--ink);
}
.h1 em{font-style:italic;color:var(--sage);font-weight:600}

.h3{font-family:var(--serif);font-weight:600;font-size:1.8125rem;line-height:1.18;color:var(--green)}

.body-text{font-size:1.25rem;line-height:1.9;color:#3f5445;font-weight:400;letter-spacing:.005em}
.body-text.light{color:rgba(255,255,255,.82)}

.section-label{
  font-size:1.1875rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:#4b5f50;text-align:center;
}
.section-label.light{color:rgba(255,255,255,.72)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --h:3.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--h);padding:0 2.875rem;border-radius:999px;
  font-size:1rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s ease,color .35s ease,background-color .35s ease,border-color .35s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(120% 160% at 50% 130%,rgba(255,255,255,.34),transparent 60%);
  transform:translateY(70%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .5s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{transform:translateY(0);opacity:1}
.btn:active{transform:translateY(-1px) scale(.99)}

/* Submitting state — the brief form posts to the backend, so give the user
   something calmer than a frozen button while the request is in flight. */
.btn[disabled]{cursor:progress;opacity:.72}
.btn[disabled]:hover{transform:none}
.btn.is-loading::after{
  content:"";flex:0 0 auto;width:1em;height:1em;margin-left:.625em;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::after{animation-duration:2s}
}

.btn-solid{background:var(--green);color:#fff;box-shadow:0 10px 26px -14px rgba(36,74,54,.9)}
.btn-solid:hover{background:#2e5a41;box-shadow:0 20px 38px -16px rgba(36,74,54,.75)}

.btn-outline{border:1px solid rgba(36,74,54,.42);color:var(--green)}
.btn-outline:hover{border-color:var(--green);background:rgba(36,74,54,.06)}

.btn-ghost-light{border:1px solid rgba(255,255,255,.6);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff}

.btn-light{background:#fff;color:var(--green);box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.btn-light:hover{background:#f2f6f2}

.btn-sm{--h:3.375rem;font-size:.9375rem;padding:0 2.25rem}

/* ==========================================================================
   Reveal animations
   ========================================================================== */
.reveal{opacity:0;transform:translateY(2.375rem);transition:opacity .9s cubic-bezier(.2,.8,.25,1),transform .9s cubic-bezier(.2,.8,.25,1)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-2.375rem)}
.reveal-r{opacity:0;transform:translateX(2.375rem)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-r{opacity:1!important;transform:none!important;transition:none!important}
  .hero-bg img,.hero-bg-media{transform:none!important}
  html{scroll-behavior:auto}
}

/* utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}