/* ============================================================
   LESTRAG — Premium Design System
   Legal Strategy & Attorneys Group · Panamá
   ============================================================ */

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-size:16px;line-height:1.65;
  color:var(--ink);background:var(--ivory-soft);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
ul{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --deep-blue:#0F2745;
  --blue:#1A3A5F;
  --blue-light:#2E4F7A;
  --champagne:#C9A66B;
  --champagne-light:#E8C982;
  --champagne-soft:#F2DBA0;
  --champagne-dark:#9A7E4A;
  --ivory:#F8F6F2;
  --ivory-soft:#FBFAF7;
  --ink:#1A2333;
  --ink-soft:#4A5568;
  --muted:#94A3B8;
  --line:#E5E7EB;
  --line-soft:#F1F2F4;
  --white:#FFFFFF;
  --shadow-sm:0 2px 8px rgba(15,39,69,.06);
  --shadow-md:0 6px 22px rgba(15,39,69,.08);
  --shadow-lg:0 14px 40px rgba(15,39,69,.12);
  --shadow-xl:0 24px 60px rgba(15,39,69,.16);
  --gold-glow:0 8px 28px rgba(201,166,107,.32);
  --title:'Cinzel','Playfair Display',Georgia,serif;
  --body:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --container:1240px;
  --header-h:78px;
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tr:.3s var(--ease);
}

::selection{background:var(--champagne);color:var(--white)}

/* ---------- Typography helpers ---------- */
h1,h2,h3,h4{font-family:var(--title);font-weight:600;line-height:1.15;color:var(--deep-blue);letter-spacing:.01em}
h1{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:600;letter-spacing:.005em}
h2{font-size:clamp(1.6rem,2.6vw,2.05rem);font-weight:600;letter-spacing:.01em}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:600}
h4{font-size:1.05rem;font-weight:700}
p{line-height:1.7;color:var(--ink-soft)}

.eyebrow{
  display:inline-block;
  font-family:var(--body);font-size:.72rem;font-weight:800;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--champagne-dark);
  position:relative;padding:0 0 0 28px;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:20px;height:1px;background:var(--champagne);
}

.lead{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.35rem);font-style:italic;color:var(--ink-soft);line-height:1.55}

/* ---------- Container ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 5%}
.container-sm{max-width:980px;margin:0 auto;padding:0 5%}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;
  font-family:var(--body);font-size:.88rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--champagne-soft) 0%,var(--champagne) 50%,var(--champagne-dark) 100%);
  color:var(--deep-blue);
  box-shadow:var(--gold-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,166,107,.45)}
.btn-outline{
  background:transparent;color:var(--white);
  border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline:hover{background:var(--white);color:var(--deep-blue);border-color:var(--white)}
.btn-ghost{
  background:transparent;color:var(--deep-blue);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{border-color:var(--champagne);color:var(--champagne-dark);background:var(--ivory)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--deep-blue);color:#fff;padding:10px 16px;z-index:9999;
}
.skip-link:focus{left:0}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 5%;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.topbar.scrolled{box-shadow:var(--shadow-md);background:rgba(255,255,255,.99)}

.brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;flex-shrink:0;
}
.brand-logo{
  width:54px;height:54px;border-radius:50%;object-fit:contain;flex-shrink:0;
  transition:transform .4s var(--ease);
}
.brand:hover .brand-logo{transform:rotate(-5deg) scale(1.04)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text .firm-name{
  font-family:var(--title);font-size:1.05rem;font-weight:700;
  color:var(--deep-blue);letter-spacing:.16em;
}
.brand-text .firm-tag{
  font-family:var(--body);font-size:.62rem;font-weight:700;
  color:var(--ink-soft);letter-spacing:.28em;text-transform:uppercase;
  margin-top:4px;
}

.nav{display:flex;align-items:center;gap:30px;font-size:.86rem;font-weight:700;color:var(--deep-blue);letter-spacing:.04em}
.nav a{position:relative;padding:6px 0}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--champagne);transition:width .3s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--champagne-dark)}
.nav a:hover::after,.nav a.active::after{width:100%}

.actions{display:flex;align-items:center;gap:10px}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;border-radius:999px;
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne) 50%,var(--champagne-dark));
  color:var(--deep-blue);font-weight:800;letter-spacing:.14em;
  font-size:.78rem;text-transform:uppercase;
  box-shadow:var(--gold-glow);
  transition:all .3s var(--ease);
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,166,107,.5)}

.language{position:relative}
.lang-toggle{
  display:flex;align-items:center;gap:7px;
  background:var(--white);color:var(--deep-blue);
  border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;font-weight:700;font-size:.82rem;
  transition:.2s;
}
.lang-toggle:hover{border-color:var(--champagne);color:var(--champagne-dark)}
.lang-toggle i{color:var(--champagne);font-size:.95rem}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);
  display:none;min-width:170px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  border-radius:14px;overflow:hidden;z-index:20;
}
.lang-menu.open{display:block}
.lang-menu button{
  width:100%;padding:11px 16px;background:#fff;
  text-align:left;font-weight:700;color:var(--deep-blue);
  font-size:.86rem;border-bottom:1px solid var(--line);
  transition:background .2s;
}
.lang-menu button:last-child{border-bottom:0}
.lang-menu button:hover,.lang-menu button.active{background:var(--ivory);color:var(--champagne-dark)}

.hamb{display:none;padding:8px 8px;background:transparent}
.hamb span{display:block;width:24px;height:2px;background:var(--deep-blue);margin:5px 0;transition:.3s var(--ease);border-radius:1px}
.hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;height:88vh;min-height:560px;max-height:780px;
  overflow:hidden;background:#0a1828;
}
.hero-carousel{
  position:absolute;inset:0;z-index:0;
  display:flex;width:100%;height:100%;
  transition:transform 1s var(--ease);
  will-change:transform;
}
.hero-slide{
  flex:0 0 100%;width:100%;height:100%;
  background-size:cover;background-position:center;
  position:relative;flex-shrink:0;
}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:65%;
  z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,39,69,0) 0%,rgba(15,39,69,.35) 45%,rgba(15,39,69,.88) 100%);
}
.hero-content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 5% 7% 5%;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero-eyebrow{
  display:inline-block;color:var(--champagne-soft);
  font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  font-size:.7rem;margin-bottom:14px;
}
.hero-content h1{
  font-family:var(--title);
  font-size:clamp(1.7rem,3.2vw,2.55rem);
  font-weight:600;color:#fff;letter-spacing:.01em;
  margin:0 0 10px;line-height:1.12;
  text-shadow:0 4px 22px rgba(0,0,0,.55);
  max-width:780px;
}
.hero-content .hero-sub{
  color:#fff;font-size:clamp(.92rem,1.2vw,1.1rem);
  font-weight:500;letter-spacing:.04em;margin:0 0 12px;
  font-family:var(--serif);font-style:italic;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  max-width:600px;
}
.hero-content p{
  color:rgba(255,255,255,.92);font-size:.92rem;max-width:580px;
  line-height:1.6;margin:0 0 22px;font-weight:400;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}

/* Hero values — small phrases for the motto */
.hero-values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:14px 0 18px;max-width:720px;
}
.hero-value{
  display:flex;flex-direction:column;gap:5px;
  padding:6px 0 6px 14px;
  border-left:2px solid var(--champagne);
}
.hero-value .hv-name{
  font-family:var(--title);font-size:.72rem;font-weight:700;
  color:var(--champagne-soft);
  letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.hero-value .hv-text{
  font-size:.84rem;line-height:1.45;
  color:rgba(255,255,255,.92);
  font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

.hero-dots{
  position:absolute;right:5%;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:12px;
}
.hero-dots button{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.6);
  transition:.3s var(--ease);cursor:pointer;padding:0;
}
.hero-dots button.active{
  background:var(--champagne);
  border-color:var(--champagne);
  transform:scale(1.4);
}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.05rem;
  display:grid;place-items:center;
  backdrop-filter:blur(8px);
  transition:.25s var(--ease);cursor:pointer;padding:0;
}
.hero-arrow.prev{left:24px}
.hero-arrow.next{right:80px}
.hero-arrow:hover{background:var(--champagne);border-color:var(--champagne);color:var(--deep-blue)}

.hero-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:rgba(255,255,255,.1);
}
.hero-progress::after{
  content:"";display:block;height:100%;
  background:linear-gradient(90deg,var(--champagne-soft),var(--champagne));
  width:0;transition:width 5s linear;
}
.hero-progress.running::after{width:100%}

/* ============================================================
   PAGE HERO (smaller, for inner pages)
   ============================================================ */
.page-hero{
  position:relative;height:46vh;min-height:340px;max-height:480px;
  overflow:hidden;background:#0a1828;
  display:flex;align-items:flex-end;
  margin-top:var(--header-h);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,rgba(15,39,69,.7) 0%,rgba(15,39,69,.4) 100%);
}
.page-hero .hero-bg{
  position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.02);
}
.page-hero .hero-content{padding-bottom:6%}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:96px 0;position:relative}
section.tight{padding:64px 0}
section.compact{padding:48px 0}

.section-head{text-align:center;max-width:760px;margin:0 auto 64px}
.section-head.left{text-align:left;margin-left:0;margin-right:0}
.section-head h2{margin:14px 0 16px}
.section-head p{font-size:1.02rem;color:var(--ink-soft);max-width:620px;margin:0 auto}
.section-head.left p{margin:0}

.divider{
  width:40px;height:1px;background:var(--champagne);
  margin:24px auto;opacity:.7;
}
.section-head.left .divider{margin-left:0}

/* ============================================================
   PRINCIPLES (home)
   ============================================================ */
.principles{
  background:var(--white);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.principles-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  margin-top:48px;
}
.principle{
  text-align:center;padding:0 12px;
  position:relative;
}
.principle::after{
  content:"";position:absolute;right:-24px;top:30px;bottom:30px;
  width:1px;background:var(--line);
}
.principle:last-child::after{display:none}
.principle-icon{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--ivory),var(--white));
  border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 20px;
  color:var(--champagne-dark);font-size:1.4rem;
  transition:all .4s var(--ease);
}
.principle:hover .principle-icon{
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne));
  color:var(--white);border-color:var(--champagne);
  transform:scale(1.08) rotate(-5deg);
}
.principle h3{margin-bottom:10px}
.principle p{font-size:.95rem;line-height:1.65}

/* ============================================================
   SERVICE FEATURE CARDS
   ============================================================ */
.services-featured{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-bottom:48px;
}
.svc-feature{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 30px;
  position:relative;overflow:hidden;
  transition:all .4s var(--ease);
}
.svc-feature::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--champagne-soft),var(--champagne),var(--champagne-dark));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.svc-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-feature:hover::before{transform:scaleX(1)}
.svc-feature .num{
  position:absolute;top:24px;right:28px;
  font-family:var(--title);font-size:2.4rem;font-weight:700;
  color:var(--line);line-height:1;
  transition:color .4s var(--ease);
}
.svc-feature:hover .num{color:var(--champagne-light)}
.svc-feature .ico{
  width:48px;height:48px;border-radius:12px;
  background:var(--ivory);
  display:grid;place-items:center;
  color:var(--champagne-dark);font-size:1.25rem;
  margin-bottom:18px;
  transition:all .4s var(--ease);
}
.svc-feature:hover .ico{
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne));
  color:var(--white);
}
.svc-feature h3{font-size:1.18rem;margin-bottom:10px}
.svc-feature p{font-size:.92rem;line-height:1.6;margin-bottom:16px}
.svc-feature .more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:800;letter-spacing:.16em;
  color:var(--champagne-dark);text-transform:uppercase;
}
.svc-feature .more .arr{transition:transform .3s var(--ease)}
.svc-feature:hover .more .arr{transform:translateX(4px)}

.services-all{
  text-align:center;margin-top:32px;
}

/* ============================================================
   SERVICE GRID (areas page)
   ============================================================ */
.area-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.area-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:26px 24px;
  transition:all .35s var(--ease);
  position:relative;overflow:hidden;
}
.area-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--champagne-soft),var(--champagne-dark));
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.area-card:hover{
  border-color:var(--champagne-light);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.area-card:hover::before{transform:scaleY(1)}
.area-card .ico{
  width:42px;height:42px;border-radius:10px;
  background:var(--ivory);
  display:grid;place-items:center;
  color:var(--champagne-dark);font-size:1.05rem;
  margin-bottom:14px;transition:.3s var(--ease);
}
.area-card:hover .ico{background:var(--champagne);color:var(--white)}
.area-card h3{font-size:1rem;margin-bottom:8px;font-weight:700}
.area-card p{font-size:.86rem;line-height:1.55;margin:0}

/* ============================================================
   FORMS
   ============================================================ */
.form-premium{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:44px 40px;
  box-shadow:var(--shadow-md);
}
.form-premium .form-head{margin-bottom:28px}
.form-premium .form-head h3{font-size:1.4rem;margin-bottom:6px}
.form-premium .form-head p{font-size:.9rem;color:var(--ink-soft)}

.field{position:relative;margin-bottom:18px}
.field label{
  display:block;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;
  background:var(--ivory-soft);
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:.95rem;color:var(--ink);
  transition:.25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:var(--white);
  border-color:var(--champagne);
  box-shadow:0 0 0 4px rgba(201,166,107,.12);
}
.field textarea{resize:vertical;min-height:110px}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.row .field{margin-bottom:0}

.checkbox-field{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.85rem;color:var(--ink-soft);line-height:1.5;
}
.checkbox-field input[type=checkbox]{
  width:18px;height:18px;margin-top:2px;cursor:pointer;
  accent-color:var(--champagne);
}
.checkbox-field a{color:var(--champagne-dark);text-decoration:underline;text-underline-offset:3px}

.form-status{
  margin-top:14px;padding:12px 16px;border-radius:10px;
  font-size:.88rem;display:none;
}
.form-status.show{display:block;animation:fadeIn .4s var(--ease)}
.form-status.ok{background:#E8F5E9;color:#1B5E20;border:1px solid #C8E6C9}
.form-status.err{background:#FFEBEE;color:#B71C1C;border:1px solid #FFCDD2}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.form-quick{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px}
.form-quick h3{font-size:1.3rem;margin-bottom:6px}
.form-quick p{font-size:.88rem;color:var(--ink-soft);margin-bottom:22px}

/* ============================================================
   ABOUT / FOUNDER
   ============================================================ */
.founder{
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;
}
.founder-img{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:4/5;background:var(--ivory);
  box-shadow:var(--shadow-lg);
}
.founder-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.founder-img::after{
  content:"";position:absolute;left:24px;top:24px;right:24px;bottom:24px;
  border:1px solid var(--champagne);border-radius:12px;pointer-events:none;
  opacity:.4;
}
.founder-meta{font-size:.85rem;color:var(--champagne-dark);font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.founder h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:18px}
.founder h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--champagne-dark)}
.founder .founder-quote{
  font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink-soft);
  border-left:3px solid var(--champagne);
  padding:6px 0 6px 22px;margin:24px 0;
  line-height:1.55;
}
.founder-bio p{margin-bottom:14px}

/* ============================================================
   PHILOSOPHY (quote cards)
   ============================================================ */
.philosophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.quote-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:36px 30px;
  position:relative;
  transition:all .4s var(--ease);
}
.quote-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.quote-card .mark{
  font-family:var(--serif);font-size:4rem;line-height:1;
  color:var(--champagne-light);font-style:italic;
  position:absolute;top:14px;left:24px;opacity:.4;
}
.quote-card p{
  font-family:var(--serif);font-size:1.1rem;font-style:italic;line-height:1.55;
  color:var(--ink);padding-top:24px;margin:0 0 18px;
}
.quote-card cite{
  display:block;font-style:normal;font-size:.76rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-dark);
}

/* ============================================================
   PHILOSOPHY (value cards) — Justicia · Verdad · Libertad
   ============================================================ */
.value-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;
}
.value-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:40px 32px 32px;
  position:relative;
  transition:all .4s var(--ease);
  display:flex;flex-direction:column;
}
.value-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--champagne-light);
}
.value-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--champagne-soft),var(--champagne),var(--champagne-dark));
  border-radius:16px 16px 0 0;
  opacity:0;transition:opacity .4s var(--ease);
}
.value-card:hover::before{opacity:1}
.value-icon{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne));
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.3rem;
  margin-bottom:18px;
  box-shadow:0 6px 16px rgba(201,166,107,.3);
  transition:transform .4s var(--ease);
}
.value-card:hover .value-icon{transform:scale(1.08) rotate(-6deg)}
.value-card h3{
  font-family:var(--title);
  font-size:1.55rem;font-weight:600;
  color:var(--deep-blue);
  margin:0 0 4px;line-height:1.1;
  letter-spacing:.02em;
}
.value-divider{
  width:32px;height:1px;
  background:var(--champagne);
  margin:14px 0 18px;opacity:.7;
}
.value-card p{
  font-size:.92rem;line-height:1.65;
  color:var(--ink-soft);margin:0 0 12px;
}
.value-card p:last-child{margin-bottom:0}
.value-card .value-quote{
  font-family:var(--serif);font-size:.98rem;font-style:italic;
  color:var(--ink);
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  margin-top:auto;
  line-height:1.5;
}
.philosophy-closing{
  margin-top:48px;padding:32px 36px;
  background:var(--ivory);
  border-left:3px solid var(--champagne);
  border-radius:0 12px 12px 0;
}
.philosophy-closing p{
  font-family:var(--serif);font-size:1.12rem;font-style:italic;
  line-height:1.6;color:var(--ink);margin:0;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section{
  background:linear-gradient(135deg,var(--deep-blue) 0%,#0a1c33 100%);
  color:#fff;text-align:center;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(201,166,107,.18),transparent 50%),
             radial-gradient(circle at 80% 70%,rgba(201,166,107,.12),transparent 50%);
  pointer-events:none;
}
.cta-section .container{position:relative;z-index:1}
.cta-section h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:14px}
.cta-section p{color:rgba(255,255,255,.78);max-width:580px;margin:0 auto 28px;font-size:1.02rem}
.cta-section .ornament{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:18px;
}
.cta-section .ornament .ln{width:30px;height:1px;background:var(--champagne)}
.cta-section .ornament .fl{color:var(--champagne);font-size:1.1rem}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:48px;
}
.testi-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:38px 34px 30px;
  position:relative;
  transition:all .4s var(--ease);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.testi-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--champagne-soft),var(--champagne-dark));
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.testi-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--champagne-light);
}
.testi-card:hover::before{transform:scaleY(1)}
.testi-card .mark{
  font-family:var(--serif);font-size:3.6rem;line-height:.8;
  color:var(--champagne-light);font-style:italic;
  position:absolute;top:18px;right:28px;opacity:.55;
  pointer-events:none;
}
.testi-card .quote{
  font-family:var(--serif);font-size:1.05rem;font-style:italic;
  line-height:1.6;color:var(--ink);
  margin:0 0 22px;
  position:relative;z-index:1;
}
.testi-card .client{
  display:flex;flex-direction:column;gap:3px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  margin-top:auto;
}
.testi-card .name{
  font-family:var(--body);font-size:.98rem;font-weight:800;
  color:var(--deep-blue);
  letter-spacing:.01em;
}
.testi-card .role{
  font-size:.76rem;font-weight:700;
  color:var(--champagne-dark);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.testi-card .case{
  font-size:.82rem;font-weight:600;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;
  align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-card{
  display:flex;align-items:flex-start;gap:18px;
  padding:24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  transition:all .3s var(--ease);
}
.contact-card:hover{border-color:var(--champagne);box-shadow:var(--shadow-sm)}
.contact-card .ico{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne));
  color:var(--white);flex-shrink:0;
  display:grid;place-items:center;font-size:1.1rem;
}
.contact-card .meta{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-dark);margin-bottom:4px}
.contact-card .val{font-size:1.02rem;font-weight:700;color:var(--deep-blue);line-height:1.4}
.contact-card .val a:hover{color:var(--champagne-dark)}

.map-embed{
  border-radius:18px;overflow:hidden;margin-top:48px;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  aspect-ratio:21/9;position:relative;
}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-directions{
  position:absolute;left:20px;bottom:20px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--deep-blue);color:#fff;
  padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:.85rem;letter-spacing:.06em;
  box-shadow:0 8px 24px rgba(15,39,69,.35);
  transition:.25s var(--ease);
  text-decoration:none;
}
.map-directions:hover{transform:translateY(-2px);background:var(--champagne);color:var(--deep-blue)}
.map-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;font-size:.8rem;font-weight:700;
  color:var(--champagne-dark);
  text-decoration:none;letter-spacing:.04em;
}
.map-link:hover{color:var(--deep-blue)}

.social-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.social-row a{
  width:42px;height:42px;border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--deep-blue);font-size:1rem;
  transition:all .3s var(--ease);
}
.social-row a:hover{
  background:var(--champagne);color:var(--white);
  transform:translateY(-3px);border-color:var(--champagne);
  box-shadow:var(--gold-glow);
}

/* ============================================================
   TRADE / TIMBER PAGES
   ============================================================ */
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.feature-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:14px;
  transition:.3s var(--ease);
}
.feature-item:hover{border-color:var(--champagne-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.feature-item .ico{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--champagne-soft),var(--champagne));
  color:var(--white);
  display:grid;place-items:center;font-size:1.15rem;
}
.feature-item h3{font-size:1.02rem;margin-bottom:6px}
.feature-item p{font-size:.88rem;line-height:1.55;margin:0}

.split-section{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.split-section.reverse{direction:rtl}
.split-section.reverse > *{direction:ltr}
.split-img{
  aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-content h2{margin-bottom:16px}
.split-content ul{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.split-content li{display:flex;gap:12px;font-size:.95rem;color:var(--ink-soft)}
.split-content li i{color:var(--champagne);font-size:1rem;margin-top:4px;flex-shrink:0}

.disclaimer{
  background:var(--ivory);
  border:1px solid var(--line);
  border-left:3px solid var(--champagne);
  border-radius:10px;
  padding:20px 24px;
  font-size:.88rem;color:var(--ink-soft);
  line-height:1.6;margin-top:32px;
}
.disclaimer strong{color:var(--deep-blue);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--deep-blue);
  color:rgba(255,255,255,.78);
  padding:80px 0 0;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:56px;
}
.footer-brand img{filter:brightness(0) invert(1);width:200px;height:auto;margin-bottom:18px;opacity:.95}
.footer-brand p{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.7);max-width:300px;margin-bottom:18px}
.footer-brand .social-row a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.footer-brand .social-row a:hover{background:var(--champagne);border-color:var(--champagne);color:var(--deep-blue)}

footer h4{
  color:#fff;font-family:var(--body);font-size:.78rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:rgba(255,255,255,.7);font-size:.9rem;transition:.2s}
.footer-links a:hover{color:var(--champagne-light);padding-left:4px}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.5);
  flex-wrap:wrap;gap:12px;
}
.footer-bottom a{color:rgba(255,255,255,.7)}
.footer-bottom a:hover{color:var(--champagne-light)}

/* ============================================================
   WHATSAPP FLOATING
   ============================================================ */
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;font-size:1.6rem;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:.3s var(--ease);
  text-decoration:none;
}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 36px rgba(37,211,102,.5)}
.whatsapp-float::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid #25D366;opacity:.5;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.3);opacity:0}}

/* ============================================================
   404
   ============================================================ */
.error-404{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:60px 5%;
  background:linear-gradient(180deg,var(--ivory-soft) 0%,var(--white) 100%);
}
.error-404 .num{
  font-family:var(--title);font-size:clamp(7rem,18vw,14rem);
  font-weight:600;color:var(--champagne);line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(135deg,var(--champagne-soft) 0%,var(--champagne) 50%,var(--champagne-dark) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
.error-404 h1{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.error-404 p{font-size:1.05rem;max-width:480px;margin:0 auto 32px}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:16px}
.mb-4{margin-bottom:32px}
.hidden{display:none !important}
.no-scroll{overflow:hidden}

/* ============================================================
   REVEAL ANIMATIONS (subtle)
   ============================================================ */
.reveal-init{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-in{opacity:1;transform:translateY(0)}
.reveal-init:nth-child(2){transition-delay:.08s}
.reveal-init:nth-child(3){transition-delay:.16s}
.reveal-init:nth-child(4){transition-delay:.24s}
.reveal-init:nth-child(5){transition-delay:.32s}
.reveal-init:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion: reduce){
  .reveal-init{opacity:1;transform:none;transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav,.actions .cta-btn{display:none}
  .hamb{display:block}
  .topbar{padding:0 4%;height:64px;--header-h:64px}
  .brand-logo{width:42px;height:42px}
  .brand-text .firm-name{font-size:.85rem;letter-spacing:.12em}
  .brand-text .firm-tag{font-size:.56rem;letter-spacing:.22em}
  .topbar.mobile-open{
    height:100vh;flex-direction:column;align-items:flex-start;padding:80px 5% 40px;
    background:#fff;
  }
  .topbar.mobile-open .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    font-size:1.1rem;width:100%;
  }
  .topbar.mobile-open .actions{display:flex;width:100%;flex-direction:column;gap:12px;margin-top:auto}
  .topbar.mobile-open .cta-btn{display:inline-flex;width:100%;justify-content:center;padding:14px 24px}
  .topbar.mobile-open .lang-toggle{align-self:flex-start}

  .hero{height:80vh;min-height:480px;max-height:none}
  .hero-content{padding:0 6% 14% 6%}
  .hero-dots{right:12px;gap:8px}
  .hero-values{grid-template-columns:1fr;gap:10px;margin:12px 0 14px}
  .hero-value{padding:4px 0 4px 12px}
  .hero-arrow{display:none}
  .hero-progress{bottom:0}
  .page-hero{height:36vh;min-height:280px}

  .principles-grid{grid-template-columns:1fr;gap:36px}
  .principle::after{display:none}
  .services-featured{grid-template-columns:1fr;gap:18px}
  .area-grid{grid-template-columns:1fr;gap:14px}
  .testi-grid{grid-template-columns:1fr;gap:18px}
  .philosophy-grid{grid-template-columns:1fr;gap:18px}
  .value-grid{grid-template-columns:1fr;gap:18px}
  .philosophy-closing{padding:24px 22px}
  .feature-list{grid-template-columns:1fr;gap:14px}
  .founder,.split-section,.contact-grid{grid-template-columns:1fr;gap:36px}
  .split-section.reverse{direction:ltr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .field.row{grid-template-columns:1fr;gap:18px}
  .form-premium{padding:28px 22px}
  section{padding:64px 0}
  .section-head{margin-bottom:42px}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .hero-buttons .btn{justify-content:center}
  .whatsapp-float{width:52px;height:52px;font-size:1.4rem;right:14px;bottom:14px}
}