/* =====================================================================
   Palmwood Real Estate — components.css
   Reusable UI components: buttons, image tiles, bento cards, form
   fields, custom cursor, loader, page-transition curtain, cookie
   banner, marquee, lightbox and small text helpers.
   ===================================================================== */

/* ---------- Text accents (inline emphasis) ---------- */
.i-light{font-style:italic;font-weight:400}
.i-accent{font-style:italic;color:var(--accent)}
.i-sand{font-style:italic;color:var(--sand)}

/* ---------- Eyebrows (small uppercase labels) ---------- */
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.eyebrow--sand{color:var(--sand)}
.eyebrow--projet{font-size:13px;letter-spacing:.18em;color:var(--sand)}
.hero-tagline{font-size:clamp(12px,1vw,14px);letter-spacing:.28em;text-transform:uppercase;font-weight:600}

/* =====================================================================
   Buttons
   ---------------------------------------------------------------------
   .btn provides the shared "fill from the bottom" hover behaviour;
   the .btn-* classes below give each button its shape and colour.
   ===================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .45s,border-color .45s}
.btn>span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .55s cubic-bezier(.19,1,.22,1);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--cream)!important;border-color:var(--accent)!important}
.btn--light::before{background:var(--cream)}
.btn--light:hover{color:var(--ink)!important;border-color:var(--cream)!important}

.btn-footer{display:inline-block;border:1px solid rgba(244,241,234,.5);padding:17px 38px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:40px;color:var(--cream)}
.btn-history{display:inline-block;border:1px solid rgba(244,241,234,.45);color:var(--cream);padding:17px 34px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:40px}
.btn-contact-lg{display:inline-block;margin-top:18px;background:var(--accent);color:var(--cream);padding:20px 48px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border-radius:44px}
.btn-submit{margin-top:10px;align-self:flex-start;background:var(--accent);color:var(--cream);padding:18px 44px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border-radius:44px}
.btn-project{display:inline-block;background:var(--accent);color:var(--cream);padding:18px 44px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border-radius:44px}
.btn-project-outline{display:inline-block;border:1px solid rgba(17,17,16,.28);color:var(--ink);padding:18px 40px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:44px}

/* =====================================================================
   Image tiles (portfolio cards, project gallery, team photos)
   ===================================================================== */
.tile-img{transition:transform 1.3s cubic-bezier(.19,1,.22,1)}
.tile:hover .tile-img{transform:scale(1.07)}
.tile .tile-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,.1) 30%,rgba(14,14,14,.6));opacity:0;transition:opacity .6s ease}
.tile:hover .tile-veil{opacity:1}
.tile .tile-arrow{position:absolute;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px;transform:translate(-8px,8px);opacity:0;transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .6s}
.tile:hover .tile-arrow{transform:none;opacity:1}
.tile-badge{position:absolute;left:22px;top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:7px 14px;border-radius:30px;background:rgba(14,14,14,.5);backdrop-filter:blur(6px);color:var(--cream)}

/* =====================================================================
   Bento cards (services)
   ===================================================================== */
.bento{position:relative;overflow:hidden;transition:transform .55s cubic-bezier(.19,1,.22,1),color .45s}
.bento>*{position:relative;z-index:1}
.bento::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .6s cubic-bezier(.19,1,.22,1);z-index:0}
.bento:hover::after{transform:translateY(0)}
.bento:hover{color:var(--cream)}
.bento:hover .b-muted{color:rgba(244,241,234,.62)}

/* =====================================================================
   Form fields
   ===================================================================== */
.field input,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid rgba(17,17,16,.22);padding:14px 2px;width:100%;outline:none;transition:border-color .4s}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field.err input,.field.err textarea{border-color:var(--err)}
.field textarea{resize:none;min-height:120px}
.field__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(17,17,16,.55)}
.field__err{font-size:12.5px;color:var(--err);margin-top:8px;display:block}

/* =====================================================================
   Custom cursor
   ===================================================================== */
.cursor-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:10001;will-change:transform}
.cursor-ring{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:10000;display:flex;align-items:center;justify-content:center;will-change:transform;transition:width .4s cubic-bezier(.19,1,.22,1),height .4s cubic-bezier(.19,1,.22,1),background-color .4s,border-color .4s}
.cursor-ring.is-label{width:108px;height:108px;background:var(--accent);border-color:var(--accent)}
.cursor-label{font-weight:600;font-size:10px;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:0;transition:opacity .3s;text-align:center;padding:0 10px}
.cursor-ring.is-label .cursor-label{opacity:1}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}body{cursor:auto!important}}

/* =====================================================================
   Loader (first visit)
   ===================================================================== */
.loader{position:fixed;inset:0;z-index:9995;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;color:var(--cream);overflow:hidden;will-change:transform}
.loader__palm{height:clamp(74px,9vw,104px);width:auto;opacity:.92}
.loader__word{height:clamp(26px,3vw,34px);width:auto;filter:brightness(0) invert(1);opacity:.92}
.loader__progress{display:flex;align-items:center;gap:18px;margin-top:6px}
.loader__track{width:clamp(160px,30vw,300px);height:1px;background:rgba(244,241,234,.16);position:relative}
.loader__bar{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--accent)}
.loader__num{font-size:12px;letter-spacing:.26em;font-weight:600;color:rgba(244,241,234,.75);font-variant-numeric:tabular-nums}

/* ---------- Page-transition curtain ---------- */
.pw-curtain{position:fixed;inset:0;z-index:9990;background:var(--accent,#1c7262);display:none;transform:scaleY(0);transform-origin:bottom}

/* =====================================================================
   Cookie banner
   ---------------------------------------------------------------------
   Hidden by default via .is-hidden; app.js toggles that class.
   ===================================================================== */
.cookie-banner{position:fixed;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:9600;max-width:420px;background:var(--canvas);border:1px solid rgba(17,17,16,.12);border-radius:6px;box-shadow:0 24px 60px rgba(40,32,18,.18);padding:clamp(24px,3vw,34px)}
.cookie-banner.is-hidden{display:none}
.cookie-banner__title{margin:0 0 12px;font-size:1.5rem;font-weight:500;color:var(--ink)}
.cookie-banner__text{margin:0 0 22px;font-size:14px;line-height:1.6;color:rgba(17,17,16,.7)}
.cookie-banner__actions{display:flex;gap:12px;flex-wrap:wrap}
.ck-accept{background:var(--accent);color:var(--cream);padding:13px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid var(--accent);border-radius:40px;cursor:pointer}
.ck-decline{background:none;color:var(--ink);padding:13px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid rgba(17,17,16,.25);border-radius:40px;cursor:pointer}

/* =====================================================================
   Lightbox (project gallery)
   ===================================================================== */
.lightbox{position:fixed;inset:0;z-index:9700;background:rgba(8,10,9,.94);backdrop-filter:blur(8px);display:none;flex-direction:column;opacity:0}
.lb-bar{display:flex;justify-content:space-between;align-items:center;padding:clamp(18px,3vw,32px) clamp(20px,4vw,48px);color:var(--cream);flex:none}
.lb-count{font-size:13px;letter-spacing:.16em;font-weight:600;color:var(--sand);font-variant-numeric:tabular-nums}
.lb-close{color:var(--cream);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}
.lb-close .x{font-size:20px;line-height:1}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:0 clamp(56px,9vw,120px) clamp(12px,2vh,24px);min-height:0}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);border-radius:50%;border:1px solid rgba(244,241,234,.3);background:none;color:var(--cream);cursor:pointer;font-size:20px}
.lb-nav--prev{left:clamp(14px,3vw,44px)}
.lb-nav--next{right:clamp(14px,3vw,44px)}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-thumbs{display:flex;gap:10px;justify-content:center;padding:clamp(12px,2vh,22px) clamp(20px,4vw,48px) clamp(20px,3vh,32px);flex:none;flex-wrap:wrap}
.lb-thumb{flex:none;width:64px;height:48px;border-radius:2px;overflow:hidden;border:1px solid transparent;opacity:.45;cursor:pointer;padding:0;background:none;transition:opacity .3s,border-color .3s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.8}
.lb-thumb.active{opacity:1;border-color:var(--sand)}