@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --color-primary:#365F55;
  --color-primary-dark:#284A45;
  --color-primary-light:#789286;
  --color-secondary:#8FA889;
  --color-accent:#C6A55F;
  --color-accent-soft:#D0B878;
  --color-accent-hover:#D8C48E;
  --color-accent-deep:#B89450;
  --color-accent-2:#956555;
  --color-bg:#F3F6F1;
  --color-bg-soft:#E4ECE6;
  --color-bg-contrast:#4E625A;
  --color-text:#27302D;
  --color-text-soft:#4A5450;
  --color-text-inverse:#F3F6F1;
  --color-border:rgba(39,48,45,0.1);
  --color-border-inverse:rgba(243,246,241,0.16);

  --gradient-hero:linear-gradient(135deg,#284A45 0%,#365F55 55%,#789286 100%);
  --gradient-soft:linear-gradient(180deg,#F3F6F1 0%,#E4ECE6 100%);
  --gradient-button:linear-gradient(135deg,#B89450 0%,#D0B878 100%);
  --gradient-button-hover:linear-gradient(135deg,#D0B878 0%,#D8C48E 100%);
  --gradient-nature:linear-gradient(160deg,#365F55 0%,#627E71 100%);
  --overlay-photo:rgba(32,66,61,0.32);
  --glow-accent:0 10px 30px rgba(198,165,95,0.22);

  --font-display:"Instrument Serif","PP Editorial New",Georgia,serif;
  --font-heading:"Sora","Cabinet Grotesk","General Sans",sans-serif;
  --font-body:"Manrope","Neue Montreal",sans-serif;
  --font-mono:"IBM Plex Sans","Geist",sans-serif;

  --container-width:1260px;
  --container-pad:24px;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-soft:0 20px 60px rgba(39,48,45,0.10);
  --shadow-card:0 14px 40px rgba(39,48,45,0.08);
  --shadow-lift:0 26px 60px rgba(39,48,45,0.16);
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --dur-fast:.35s;
  --dur-mid:.6s;
  --dur-slow:1s;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  position:relative;
  overflow-x:hidden;
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-heading);
  font-weight:600;
  color:var(--color-text);
  letter-spacing:-0.01em;
  line-height:1.14;
}

.font-display{
  font-family:var(--font-display);
  font-weight:400;
  font-style:normal;
  letter-spacing:-0.01em;
  line-height:1.05;
}

p{margin:0;color:var(--color-text-soft);line-height:1.62}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

button{font-family:inherit;cursor:pointer}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-accent-2);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--color-accent);
  display:inline-block;
}

.mono{font-family:var(--font-mono)}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-premium),box-shadow var(--dur-fast) var(--ease-premium),background var(--dur-fast) var(--ease-premium);
  white-space:nowrap;
}

.btn-primary{
  background:var(--gradient-button);
  color:#241905;
  box-shadow:var(--glow-accent);
}

.btn-primary:hover{
  background:var(--gradient-button-hover);
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(198,165,95,0.3);
}

.btn-ghost{
  background:transparent;
  border:1px solid var(--color-border-inverse);
  color:var(--color-text-inverse);
}

.btn-ghost:hover{
  background:rgba(243,246,241,0.1);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  border:1px solid var(--color-border);
  color:var(--color-text);
}

.btn-outline:hover{
  background:var(--color-bg-soft);
  border-color:var(--color-primary);
  transform:translateY(-2px);
}

.btn-dark{
  background:var(--color-primary);
  color:var(--color-text-inverse);
}

.btn-dark:hover{
  background:var(--color-primary-dark);
  transform:translateY(-2px);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:100px;
  background:rgba(149,101,85,0.12);
  color:var(--color-accent-2);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.tag-light{
  background:rgba(243,246,241,0.14);
  color:var(--color-text-inverse);
}

.underline-link{
  position:relative;
  display:inline-block;
  padding-bottom:4px;
}

.underline-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0.28);
  transform-origin:left;
  opacity:.5;
  transition:transform var(--dur-mid) var(--ease-premium),opacity var(--dur-mid) var(--ease-premium);
}

.underline-link:hover::after{transform:scaleX(1);opacity:1}
