*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --dark:        #020d09;
      --panel:       rgba(2,12,7,0.88);
      --cream:       #d6c99a;
      --cream-dim:   rgba(198,185,140,0.45);
      --cream-faint: rgba(198,185,140,0.10);
      --border:      rgba(198,185,140,0.18);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--dark);
      font-family: 'Raleway', sans-serif;
      color: var(--cream);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ─── FERN BACKGROUND ─── */
    .bg {
      position: fixed; inset: 0; z-index: 0;
      overflow: hidden; pointer-events: none;
      background:url(../../assets/img/bg-orv.png);
    }

    /* Fern image layer */
    .fern-bg {
      position: absolute; inset: 0;
      background-image: var(--fern-img);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: brightness(1.75) contrast(0.88) saturate(1.15);
      opacity: 0;
      transform: scale(1.06);
      animation: fernReveal 9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
    }
    @keyframes fernReveal {
      0%   { opacity: 0; transform: scale(1.6); }
      20%  { opacity: 1; transform: scale(1.5); }
      100% { opacity: 1; transform: scale(1); }
    }

    /* Slow breathing parallax on fern */
    .fern-bg::after {
      content: '';
      position: absolute; inset: -5%;
      background: inherit;
      animation: fernBreathe 20s ease-in-out infinite;
    }
    @keyframes fernBreathe {
      0%,100% { transform: scale(1) translate(0,0); }
      33%     { transform: scale(1.015) translate(0.3%, -0.3%); }
      66%     { transform: scale(0.99) translate(-0.3%, 0.2%); }
    }

    /* Dark overlay to deepen the image */
    .dark-overlay {
      position: absolute; inset: 0;
      background: rgba(2, 10, 6, 0.08);
      opacity: 0;
      animation: fadeIn 2.5s ease 1s forwards;
    }

    /* Radial vignette - darkest at edges, lighter in center */
    .vignette {
      position: absolute; inset: 0;
      
    }

    /* Subtle green color tint overlay that matches the fern palette */
    .color-tint {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 80% at 50% 50%,
        rgba(8, 38, 18, 0.25) 0%,
        transparent 70%);
      mix-blend-mode: multiply;
    }

    /* Animated mist / fog layer */
    .mist {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 120% 60% at 50% 50%,
        rgba(198,185,140,0.025) 0%,
        transparent 65%);
      animation: mistDrift 15s ease-in-out infinite;
      opacity: 0;
      animation: mistReveal 4s ease 2s forwards, mistDrift 15s ease-in-out 6s infinite;
    }
    @keyframes mistReveal { from{opacity:0} to{opacity:1} }
    @keyframes mistDrift {
      0%,100% { transform: translateX(0) scaleX(1); opacity: 0.7; }
      33%     { transform: translateX(2%) scaleX(1.04); opacity: 1; }
      66%     { transform: translateX(-2%) scaleX(0.97); opacity: 0.6; }
    }

    /* Grain texture */
    .grain {
      position: fixed; inset: 0; z-index: 1; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      opacity: 0.45;
    }

    /* Scanline horizontal sweep */
    .scanline {
      position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(198,185,140,0.05) 20%, rgba(198,185,140,0.09) 50%, rgba(198,185,140,0.05) 80%, transparent);
      animation: scanMove 18s linear 5s infinite;
      opacity: 0;
    }
    @keyframes scanMove {
      0%   { top: -1%; opacity: 0; }
      3%   { opacity: 1; }
      97%  { opacity: 1; }
      100% { top: 101%; opacity: 0; }
    }

    /* ─── PAGE ─── */
    .page { position: relative; z-index: 10; }

    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: clamp(16px, 3.5vw, 28px);
      padding: 40px 20px; position: relative;
    }

    .corner-accent {
      position: absolute;
      width: clamp(36px,5vw,56px); height: clamp(36px,5vw,56px);
      opacity: 0; animation: fadeIn 1s ease 2.8s forwards;
    }
    .ca-tl { top:clamp(18px,3vw,32px); left:clamp(18px,3vw,32px);   border-top:1px solid rgba(198,185,140,.3); border-left:1px solid rgba(198,185,140,.3); }
    .ca-tr { top:clamp(18px,3vw,32px); right:clamp(18px,3vw,32px);  border-top:1px solid rgba(198,185,140,.3); border-right:1px solid rgba(198,185,140,.3); }
    .ca-bl { bottom:clamp(18px,3vw,32px); left:clamp(18px,3vw,32px);  border-bottom:1px solid rgba(198,185,140,.3); border-left:1px solid rgba(198,185,140,.3); }
    .ca-br { bottom:clamp(18px,3vw,32px); right:clamp(18px,3vw,32px); border-bottom:1px solid rgba(198,185,140,.3); border-right:1px solid rgba(198,185,140,.3); }

    .pulse-ring {
      position:absolute; inset:-20%;
      border:1px solid rgba(198,185,140,.12); border-radius:50%;
      animation:pulseRing 3.5s ease-in-out 3.2s infinite; pointer-events:none;
    }
    @keyframes pulseRing { 0%{transform:scale(1);opacity:.45} 100%{transform:scale(2.6);opacity:0} }

    .logo-wrap {
      position:relative;
      width:clamp(120px,22vw,200px); height:clamp(120px,22vw,200px);
      opacity:0; animation:logoReveal 1.6s cubic-bezier(.22,1,.36,1) 1.6s forwards;
      display:flex; align-items:center; justify-content:center;
    }
    .logo-wrap img { width:275px; 
    /*height:100%; */
    object-fit:contain; filter:brightness(1.2) drop-shadow(0 0 28px rgba(198,185,140,.4)); 
        padding-bottom: 70px;
    }

    @keyframes logoReveal { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }


    @keyframes textReveal { from{opacity:0;letter-spacing:.9em} to{opacity:1;letter-spacing:clamp(.25em,2.5vw,.6em)} }

    .tagline {
      font-weight:200; font-size:clamp(.6rem,1.8vw,.8rem);
      letter-spacing:.3em; color:var(--cream-dim); text-transform:uppercase;
      opacity:0; animation:fadeUp 1s ease 3.2s forwards;
      text-shadow: 0 1px 8px rgba(0,0,0,0.7);
    }

    .scroll-cue {
      position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:6px;
      opacity:0; animation:fadeIn 1s ease 3.8s forwards; cursor:pointer;
    }
    .scroll-cue span { font-size:.6rem; letter-spacing:.25em; color:var(--cream-dim); text-transform:uppercase; }
    .scroll-cue .arrow {
      width:1px; height:32px;
      background:linear-gradient(to bottom,var(--cream-dim),transparent);
      animation:scrollArrow 1.8s ease-in-out infinite;
    }
    @keyframes scrollArrow { 0%,100%{transform:scaleY(1);opacity:.6} 50%{transform:scaleY(.5);opacity:1} }

    .divider {
      width:80%; max-width:480px; height:1px;
      background:linear-gradient(to right,transparent,var(--border),transparent);
      margin:0 auto; position:relative; z-index:10;
    }

    /* Contact section has its own subtle background to be readable */
    .contact-section {
      position:relative; z-index:10;
      max-width:680px; margin:0 auto;
      padding:clamp(60px,10vh,100px) clamp(24px,6vw,60px) clamp(80px,12vh,120px);
    }
    .contact-section::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(2,10,6,0.6) 0%, transparent 100%);
      pointer-events: none;
    }

    .section-label { font-size: 12px; letter-spacing:.35em; color:var(--cream-dim); text-transform:uppercase; margin-bottom:10px; opacity:0; animation:fadeUp 1s ease 3.8s forwards; }
    .section-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:.08em; color:var(--cream); margin-bottom:10px; line-height:1.2; text-shadow: 0 2px 20px rgba(0,0,0,0.7); }

    .contact-details-btn {
      display:inline-flex; align-items:center; gap:12px;
      border:1px solid var(--border); background:rgba(2,10,6,0.6); color:var(--cream);
      font-family:'Raleway',sans-serif; font-weight:300; font-size:.73rem; letter-spacing:.22em; text-transform:uppercase;
      padding:14px 26px; cursor:pointer; transition:background .3s,border-color .3s;
      backdrop-filter:blur(12px); margin-bottom:clamp(28px,4vw,40px);
      opacity:0; animation:fadeUp 1s ease 4.2s forwards;
    }
    .contact-details-btn:hover { background:rgba(198,185,140,.12); border-color:rgba(198,185,140,.45); }
    .contact-details-btn svg { width:16px; height:16px; flex-shrink:0; }
    #detailsArrow { transition:transform .3s; }

    .contact-details-panel { display:none; overflow:hidden; background:rgba(2,10,6,0.8); border:1px solid var(--border); backdrop-filter:blur(18px); padding:24px 28px; margin-bottom:36px; }
    .contact-details-panel.open { display:block; animation:fadeUp .4s ease both; }
    .contact-details-panel dl { display:grid; grid-template-columns:auto 1fr; gap:14px 24px; }
    .contact-details-panel dt { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--cream-dim); padding-top:2px; }
    .contact-details-panel dd { font-size:.82rem; font-weight:300; color:var(--cream); letter-spacing:.06em; }
    .contact-details-panel dd a { color:var(--cream); text-decoration:none; border-bottom:1px solid var(--border); transition:border-color .2s; }
    .contact-details-panel dd a:hover { border-color:var(--cream); }

    .contact-form { display:flex; flex-direction:column; gap:20px; opacity:0; animation:fadeUp 1s ease 4.4s forwards; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    @media(max-width:520px){ .form-row{grid-template-columns:1fr} }

    .field { display:flex; flex-direction:column; gap:8px; }
    .field label { font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-dim); }
    .field input,.field textarea,.field select {
      background:rgba(2,10,6,0.7); border:1px solid var(--border); color:var(--cream);
      font-family:'Raleway',sans-serif; font-size:.82rem; font-weight:300; letter-spacing:.05em;
      padding:13px 16px; outline:none; transition:border-color .3s,background .3s;
      -webkit-appearance:none; appearance:none; resize:none; backdrop-filter:blur(10px);
    }
    .field input:focus,.field textarea:focus,.field select:focus { border-color:rgba(198,185,140,.55); background:rgba(2,10,6,0.9); }
    .field input::placeholder,.field textarea::placeholder { color:rgba(198,185,140,.28); }
    .field textarea { min-height:130px; }
    .field select option { background:#0a200f; }

    .select-wrap { position:relative; }
    .select-wrap::after { content:''; position:absolute; right:16px; top:50%; transform:translateY(-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid rgba(198,185,140,.5); pointer-events:none; }

    .submit-btn {
      align-self:flex-start; display:inline-flex; align-items:center; gap:14px;
      border:1px solid rgba(198,185,140,.45); background:rgba(2,10,6,0.55); color:var(--cream);
      font-family:'Raleway',sans-serif; font-weight:300; font-size:.73rem; letter-spacing:.28em; text-transform:uppercase;
      padding:15px 32px; cursor:pointer; transition:background .3s,border-color .3s,letter-spacing .3s;
      position:relative; overflow:hidden; backdrop-filter:blur(10px);
    }
    .submit-btn::before { content:''; position:absolute; inset:0; background:rgba(198,185,140,.08); transform:translateX(-100%); transition:transform .4s ease; }
    .submit-btn:hover::before { transform:translateX(0); }
    .submit-btn:hover { border-color:rgba(198,185,140,.75); letter-spacing:.34em; }
    .submit-btn svg { width:14px; height:14px; transition:transform .3s; }
    .submit-btn:hover svg { transform:translateX(4px); }

    .form-success { display:none; text-align:center; padding:48px 20px; animation:fadeUp .6s ease both; }
    .form-success .check { width:52px; height:52px; border:1px solid var(--cream); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
    .form-success p { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:300; letter-spacing:.1em; color:var(--cream); margin-bottom:10px; }
    .form-success span { font-size:.68rem; letter-spacing:.22em; color:var(--cream-dim); text-transform:uppercase; }

    .footer { position:relative; z-index:10; border-top:1px solid var(--border); padding:28px clamp(24px,6vw,60px); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; background:rgba(2,10,6,0.65); backdrop-filter:blur(12px); }
    .footer-logo { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:1.1rem; letter-spacing:.45em; color:var(--cream); opacity:.7; }
    .footer-copy { font-size:.58rem; letter-spacing:.2em; color:var(--cream-dim); text-transform:uppercase; }

    @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn  { from{opacity:0} to{opacity:1} }

    /* Logo draw animations */
    @keyframes drawCircle {
      from { stroke-dashoffset: 163; opacity: 0; }
      10%  { opacity: 1; }
      to   { stroke-dashoffset: 0; opacity: 1; }
    }
    @keyframes dotAppear {
      from { opacity: 0; transform: scale(0); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes dividerDraw {
      from { stroke-dashoffset: 74; }
      to   { stroke-dashoffset: 0; }
    }
    @keyframes wordReveal {
      from { opacity: 0; letter-spacing: 28px; }
      to   { opacity: 1; letter-spacing: 14px; }
    }
    @keyframes lineDraw {
      from { stroke-dashoffset: 236; }
      to   { stroke-dashoffset: 0; }
    }
    
/*..............*/