/* =========================================================
   Luật Hồng Thuận — Tailwind-style stylesheet (compiled)
   Brand: navy / ruby / gold
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Navy - updated per user request */
  --navy-50:#e8edf5; --navy-100:#c6d0e3; --navy-200:#94a6c5;
  --navy-300:#5e79a4; --navy-400:#33558a; --navy-500:#1c3d6f;
  --navy-600:#142e57; --navy-700:#0e2447; --navy-800:#0a1f43;
  --navy-900:#001a3f; --navy-950:#001632;
  /* Ruby */
  --ruby-50:#fdecec; --ruby-100:#fbd0d2; --ruby-200:#f29b9f;
  --ruby-300:#e35e64; --ruby-400:#cc333a; --ruby-500:#b32127;
  --ruby-600:#971419; --ruby-700:#7b0f14; --ruby-800:#5e0a0e;
  --ruby-900:#42070a;
  /* Gold */
  --gold-50:#fbf4e1; --gold-100:#f4e3b2; --gold-200:#ecd082;
  --gold-300:#e0b950; --gold-400:#d4a534; --gold-500:#bf8c22;
  --gold-600:#9a6f1b; --gold-700:#785516; --gold-800:#5a3e10;
  --gold-900:#3f2a09;
  /* Surface */
  --paper:#faf6ee; --cream:#fbf6ec;
  /* Functional */
  --green-50:#ecfdf5; --green-200:#a7f3d0; --green-500:#10b981;
  --green-800:#065f46; --green-900:#064e3b;

  --shadow-card: 0 8px 30px -12px rgba(9,26,54,.18);
  --shadow-cardLg: 0 22px 50px -20px rgba(9,26,54,.28);
  --shadow-gold: 0 10px 30px -10px rgba(212,165,52,.45);

  --gradient-navy: linear-gradient(135deg,#091a36 0%,#0e2447 55%,#142e57 100%);
  --gradient-red:  linear-gradient(135deg,#971419 0%,#b32127 50%,#7b0f14 100%);
  --gradient-gold: linear-gradient(135deg,#d4a534 0%,#ecd082 35%,#bf8c22 100%);
}

/* ---------- Preflight ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid #e5e7eb;}
html{-webkit-text-size-adjust:100%;line-height:1.5;tab-size:4;scroll-behavior:smooth;}
body{margin:0;line-height:inherit;font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  color:var(--navy-900);background:var(--paper);-webkit-font-smoothing:antialiased;}
hr{height:0;color:inherit;border-top-width:1px;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;font-family:"Source Serif 4","Cormorant Garamond",Georgia,serif;}
a{color:inherit;text-decoration:inherit;}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0;}
button,select{text-transform:none;}
button{background:transparent;cursor:pointer;}
table{text-indent:0;border-color:inherit;border-collapse:collapse;}
p,blockquote,figure,ul,ol,dl{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;}
[hidden]{display:none;}
::selection{background:var(--ruby-500);color:#fff;}
input,textarea,select{outline:none;}

/* ---------- Layout: container ---------- */
.container-x{max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
@media(min-width:640px){.container-x{padding-left:1.5rem;padding-right:1.5rem;}}
@media(min-width:1024px){.container-x{padding-left:2rem;padding-right:2rem;}}

/* ---------- Position ---------- */
.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}
.inset-0{inset:0;}.inset-x-0{left:0;right:0;}
.top-0{top:0;}.bottom-0{bottom:0;}.left-0{left:0;}.right-0{right:0;}
.top-3{top:.75rem;}.right-3{right:.75rem;}.bottom-3{bottom:.75rem;}.left-3{left:.75rem;}
.top-1\/2{top:50%;}.right-full{right:100%;}
.-top-4{top:-1rem;}.-right-4{right:-1rem;}.-bottom-4{bottom:-1rem;}.-right-6{right:-1.5rem;}
.-bottom-6{bottom:-1.5rem;}.-left-6{left:-1.5rem;}
.bottom-5{bottom:1.25rem;}.right-4{right:1rem;}.left-4{left:1rem;}
.z-10{z-index:10;}.z-40{z-index:40;}.z-50{z-index:50;}.-z-10{z-index:-10;}

/* ---------- Display ---------- */
.block{display:block;}.inline{display:inline;}.inline-block{display:inline-block;}
.inline-flex{display:inline-flex;}.flex{display:flex;}.grid{display:grid;}.hidden{display:none;}

/* ---------- Flex / Grid ---------- */
.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.flex-none{flex:none;}.flex-1{flex:1 1 0%;}
.items-start{align-items:flex-start;}.items-center{align-items:center;}.items-end{align-items:flex-end;}
.justify-start{justify-content:flex-start;}.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}.justify-end{justify-content:flex-end;}
.gap-1{gap:.25rem;}.gap-1\.5{gap:.375rem;}.gap-2{gap:.5rem;}.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}.gap-5{gap:1.25rem;}.gap-6{gap:1.5rem;}.gap-8{gap:2rem;}
.gap-10{gap:2.5rem;}.gap-12{gap:3rem;}.gap-14{gap:3.5rem;}.gap-16{gap:4rem;}
.space-y-2 > * + *{margin-top:.5rem;}.space-y-3 > * + *{margin-top:.75rem;}.space-y-5 > * + *{margin-top:1.25rem;}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.col-span-2{grid-column:span 2/span 2;}.col-span-3{grid-column:span 3/span 3;}

/* ---------- Sizing ---------- */
.w-full{width:100%;}.h-full{height:100%;}.h-auto{height:auto;}.w-auto{width:auto;}
.w-0{width:0;}.w-px{width:1px;}.h-px{height:1px;}.h-0\.5{height:.125rem;}
.w-4{width:1rem;}.h-4{height:1rem;}.w-6{width:1.5rem;}.h-6{height:1.5rem;}
.w-8{width:2rem;}.h-8{height:2rem;}.w-9{width:2.25rem;}.h-9{height:2.25rem;}
.w-10{width:2.5rem;}.h-10{height:2.5rem;}.w-11{width:2.75rem;}.h-11{height:2.75rem;}
.w-12{width:3rem;}.h-12{height:3rem;}.w-14{width:3.5rem;}.h-14{height:3.5rem;}
.w-16{width:4rem;}.h-16{height:4rem;}.w-20{width:5rem;}.h-20{height:5rem;}
.w-24{width:6rem;}.h-24{height:6rem;}.w-28{width:7rem;}.h-28{height:7rem;}
.w-40{width:10rem;}.h-40{height:10rem;}.w-72{width:18rem;}.h-72{height:18rem;}
.w-96{width:24rem;}.h-96{height:24rem;}
.max-w-lg{max-width:32rem;}.max-w-xl{max-width:36rem;}.max-w-2xl{max-width:42rem;}.max-w-7xl{max-width:80rem;}
.h-1{height:.25rem;}.h-9{height:2.25rem;}
.aspect-\[4\/5\]{aspect-ratio:4/5;}.aspect-\[5\/6\]{aspect-ratio:5/6;}
.aspect-\[5\/4\]{aspect-ratio:5/4;}.aspect-\[16\/10\]{aspect-ratio:16/10;}
.min-h-screen{min-height:100vh;}
.h-\[380px\]{height:380px;}

/* ---------- Spacing ---------- */
.p-1{padding:.25rem;}.p-2{padding:.5rem;}.p-3{padding:.75rem;}.p-4{padding:1rem;}
.p-5{padding:1.25rem;}.p-6{padding:1.5rem;}.p-7{padding:1.75rem;}.p-8{padding:2rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}.px-2\.5{padding-left:.625rem;padding-right:.625rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-7{padding-left:1.75rem;padding-right:1.75rem;}.px-8{padding-left:2rem;padding-right:2rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem;}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem;}.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.pt-3{padding-top:.75rem;}.pt-6{padding-top:1.5rem;}.pb-3{padding-bottom:.75rem;}.pb-6{padding-bottom:1.5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;}.py-28{padding-top:7rem;padding-bottom:7rem;}
.pt-20{padding-top:5rem;}.pb-28{padding-bottom:7rem;}
.pt-16{padding-top:4rem;}.pb-6{padding-bottom:1.5rem;}.pt-12{padding-top:3rem;}
.m-0{margin:0;}.mx-auto{margin-left:auto;margin-right:auto;}
.mb-1{margin-bottom:.25rem;}.mb-1\.5{margin-bottom:.375rem;}.mb-2{margin-bottom:.5rem;}
.mb-3{margin-bottom:.75rem;}.mb-4{margin-bottom:1rem;}.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}.mb-7{margin-bottom:1.75rem;}.mb-8{margin-bottom:2rem;}
.mt-0\.5{margin-top:.125rem;}.mt-1{margin-top:.25rem;}.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}.mt-7{margin-top:1.75rem;}.mt-8{margin-top:2rem;}
.mt-10{margin-top:2.5rem;}.mt-12{margin-top:3rem;}
.ml-1{margin-left:.25rem;}.mr-3{margin-right:.75rem;}

/* ---------- Typography ---------- */
.font-sans{font-family:"Be Vietnam Pro",system-ui,sans-serif;}
.font-serif{font-family:"Source Serif 4","Cormorant Garamond",Georgia,serif;}
.font-light{font-weight:300;}.font-normal{font-weight:400;}.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}.font-bold{font-weight:700;}.font-extrabold{font-weight:800;}
.italic{font-style:italic;}.not-italic{font-style:normal;}
.uppercase{text-transform:uppercase;}.lowercase{text-transform:lowercase;}.capitalize{text-transform:capitalize;}
.text-left{text-align:left;}.text-center{text-align:center;}.text-right{text-align:right;}

.text-\[10px\]{font-size:10px;line-height:1.4;}
.text-\[11px\]{font-size:11px;line-height:1.4;}
.text-xs{font-size:.75rem;line-height:1rem;}
.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-5xl{font-size:3rem;line-height:1;}
.text-6xl{font-size:3.75rem;line-height:1;}
.text-7xl{font-size:4.5rem;line-height:1;}
.text-8xl{font-size:6rem;line-height:1;}

.leading-none{line-height:1;}.leading-tight{line-height:1.25;}.leading-snug{line-height:1.375;}
.leading-relaxed{line-height:1.625;}.leading-\[0\.95\]{line-height:.95;}

.tracking-tight{letter-spacing:-.025em;}.tracking-normal{letter-spacing:0;}
.tracking-wide{letter-spacing:.025em;}.tracking-wider{letter-spacing:.05em;}
.tracking-widest{letter-spacing:.1em;}
.tracking-\[0\.22em\]{letter-spacing:.22em;}
.tracking-\[0\.25em\]{letter-spacing:.25em;}
.tracking-\[0\.3em\]{letter-spacing:.3em;}

.whitespace-nowrap{white-space:nowrap;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Colors: text ---------- */
.text-white{color:#fff;}.text-black{color:#000;}
.text-navy-100{color:var(--navy-100);}.text-navy-200{color:var(--navy-200);}
.text-navy-300{color:var(--navy-300);}.text-navy-400{color:var(--navy-400);}
.text-navy-500{color:var(--navy-500);}.text-navy-600{color:var(--navy-600);}
.text-navy-700{color:var(--navy-700);}.text-navy-800{color:var(--navy-800);}
.text-navy-900{color:var(--navy-900);}
.text-ruby-400{color:var(--ruby-400);}.text-ruby-500{color:var(--ruby-500);}
.text-ruby-600{color:var(--ruby-600);}.text-ruby-700{color:var(--ruby-700);}
.text-gold-200{color:var(--gold-200);}.text-gold-300{color:var(--gold-300);}
.text-gold-400{color:var(--gold-400);}.text-gold-500{color:var(--gold-500);}
.text-gold-600{color:var(--gold-600);}
.text-green-800{color:var(--green-800);}.text-green-900{color:var(--green-900);}

/* ---------- Colors: bg ---------- */
.bg-transparent{background-color:transparent;}
.bg-white{background-color:#fff;}.bg-black{background-color:#000;}
.bg-paper{background-color:var(--paper);}.bg-cream{background-color:var(--cream);}
.bg-navy-50{background-color:var(--navy-50);}.bg-navy-100{background-color:var(--navy-100);}
.bg-navy-700{background-color:var(--navy-700);}.bg-navy-800{background-color:var(--navy-800);}
.bg-navy-900{background-color:var(--navy-900);}.bg-navy-950{background-color:var(--navy-950);}
.bg-ruby-500{background-color:var(--ruby-500);}.bg-ruby-600{background-color:var(--ruby-600);}
.bg-gold-50{background-color:var(--gold-50);}
.bg-green-50{background-color:var(--green-50);}.bg-green-500{background-color:var(--green-500);}
.bg-white\/10{background-color:rgba(255,255,255,.1);}

/* Brand gradients */
.bg-navy-gradient{background-image:var(--gradient-navy);}
.bg-red-gradient{background-image:var(--gradient-red);}
.bg-gold-gradient{background-image:var(--gradient-gold);color:var(--navy-900);}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-from),var(--tw-to));}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from),var(--tw-to));}
.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-from),var(--tw-to));}
.from-navy-900\/80{--tw-from:rgba(6,18,42,.8);}
.from-navy-950\/60{--tw-from:rgba(4,12,29,.6);}
.from-ruby-800\/95{--tw-from:rgba(94,10,14,.95);}
.via-ruby-700\/85{}
.to-transparent{--tw-to:transparent;}
.to-ruby-800\/95{--tw-to:rgba(94,10,14,.95);}
.bg-\[\#1877f2\]{background-color:#1877f2;}.bg-\[\#0068ff\]{background-color:#0068ff;}

/* ---------- Borders ---------- */
.border{border-width:1px;}.border-0{border-width:0;}.border-2{border-width:2px;}
.border-t{border-top-width:1px;}.border-b{border-bottom-width:1px;}
.border-t-2{border-top-width:2px;}.border-l-2{border-left-width:2px;}
.border-r-2{border-right-width:2px;}.border-b-2{border-bottom-width:2px;}
.border-y{border-top-width:1px;border-bottom-width:1px;}
.border-navy-50{border-color:var(--navy-50);}.border-navy-100{border-color:var(--navy-100);}
.border-navy-300{border-color:var(--navy-300);}.border-navy-700{border-color:var(--navy-700);}
.border-navy-800{border-color:var(--navy-800);}.border-navy-900{border-color:var(--navy-900);}
.border-ruby-400{border-color:var(--ruby-400);}
.border-gold-300{border-color:var(--gold-300);}.border-gold-300\/80{border-color:rgba(224,185,80,.8);}
.border-gold-400\/50{border-color:rgba(212,165,52,.5);}
.border-green-200{border-color:var(--green-200);}
.border-white\/10{border-color:rgba(255,255,255,.1);}.border-white\/80{border-color:rgba(255,255,255,.8);}

.rounded{border-radius:.25rem;}.rounded-md{border-radius:.375rem;}.rounded-lg{border-radius:.5rem;}
.rounded-xl{border-radius:.75rem;}.rounded-full{border-radius:9999px;}

/* Ring */
.ring-1{box-shadow:0 0 0 1px var(--tw-ring,#fff);}
.ring-2{box-shadow:0 0 0 2px var(--tw-ring,#fff);}
.ring-4{box-shadow:0 0 0 4px var(--tw-ring,#fff);}
.ring-white{--tw-ring:#fff;}
.ring-navy-100{--tw-ring:var(--navy-100);}
.ring-gold-200{--tw-ring:var(--gold-200);}
.ring-gold-300{--tw-ring:var(--gold-300);}
.ring-gold-300\/60{--tw-ring:rgba(224,185,80,.6);}
.ring-gold-400\/30{--tw-ring:rgba(212,165,52,.3);}
.ring-ruby-400{--tw-ring:var(--ruby-400);}
.ring-ruby-100{--tw-ring:var(--ruby-100);}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring,#fff);}
.focus\:ring-gold-200:focus{--tw-ring:var(--gold-200);}
.focus\:ring-gold-300:focus{--tw-ring:var(--gold-300);}
.focus\:border-gold-400:focus{border-color:var(--gold-400);}
.focus\:outline-none:focus{outline:none;}

/* ---------- Effects ---------- */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);}
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25);}
.shadow-card{box-shadow:var(--shadow-card);}
.shadow-cardLg{box-shadow:var(--shadow-cardLg);}
.shadow-gold{box-shadow:var(--shadow-gold);}
.drop-shadow-lg{filter:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));}

.opacity-0{opacity:0;}.opacity-10{opacity:.1;}.opacity-20{opacity:.2;}
.opacity-30{opacity:.3;}.opacity-50{opacity:.5;}.opacity-60{opacity:.6;}
.opacity-80{opacity:.8;}.opacity-90{opacity:.9;}.opacity-100{opacity:1;}

.overflow-hidden{overflow:hidden;}.overflow-auto{overflow:auto;}

/* ---------- Object ---------- */
.object-cover{object-fit:cover;}.object-contain{object-fit:contain;}

/* ---------- Transforms / transitions ---------- */
.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);}
.transition-all{transition:all .3s ease;}
.duration-200{transition-duration:.2s;}.duration-300{transition-duration:.3s;}.duration-500{transition-duration:.5s;}
.hover\:scale-105:hover{transform:scale(1.05);}
.hover\:scale-110:hover{transform:scale(1.10);}
.hover\:-translate-y-0\.5:hover{transform:translateY(-2px);}
.hover\:-translate-y-1:hover{transform:translateY(-4px);}
.-translate-y-1\/2{transform:translateY(-50%);}

/* ---------- Pointer ---------- */
.pointer-events-none{pointer-events:none;}.pointer-events-auto{pointer-events:auto;}
.cursor-pointer{cursor:pointer;}.select-none{user-select:none;}

/* ---------- Hover utilities (color) ---------- */
.hover\:bg-white:hover{background-color:#fff;}
.hover\:bg-navy-800:hover{background-color:var(--navy-800);}
.hover\:bg-gold-300:hover{background-color:var(--gold-300);}
.hover\:bg-gold-gradient:hover{background-image:var(--gradient-gold);}
.hover\:text-white:hover{color:#fff;}
.hover\:text-gold-200:hover{color:var(--gold-200);}
.hover\:text-gold-300:hover{color:var(--gold-300);}
.hover\:text-gold-600:hover{color:var(--gold-600);}
.hover\:text-navy-900:hover{color:var(--navy-900);}
.hover\:text-ruby-600:hover{color:var(--ruby-600);}
.hover\:text-ruby-700:hover{color:var(--ruby-700);}
.hover\:brightness-110:hover{filter:brightness(1.1);}
.hover\:border-gold-300:hover{border-color:var(--gold-300);}
.hover\:shadow-cardLg:hover{box-shadow:var(--shadow-cardLg);}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}

/* ---------- Group hover ---------- */
.group:hover .group-hover\:bg-gold-gradient{background-image:var(--gradient-gold);}
.group:hover .group-hover\:text-navy-900{color:var(--navy-900);}
.group:hover .group-hover\:text-ruby-600{color:var(--ruby-600);}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.group:hover .group-hover\:w-full{width:100%;}
.group:hover .group-hover\:opacity-100{opacity:1;}

/* ---------- Backdrop ---------- */
.backdrop-blur{backdrop-filter:blur(8px);}

/* ---------- Animations ---------- */
@keyframes pulseRing{
  0%{transform:scale(.7);opacity:.8;}
  80%,100%{transform:scale(2);opacity:0;}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.animate-pulse-ring{animation:pulseRing 1.8s cubic-bezier(.215,.61,.355,1) infinite;}
.animate-float{animation:float 6s ease-in-out infinite;}

/* ---------- Patterns ---------- */
.pattern-dots{
  background-image:radial-gradient(rgba(212,165,52,.25) 1px,transparent 1.5px);
  background-size:22px 22px;
}
.hero-watermark{
  background-image:
    radial-gradient(circle at 20% 20%,rgba(212,165,52,.10),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(212,165,52,.08),transparent 40%);
}
.drum-bg{
  background-image:conic-gradient(from 0deg at 50% 50%,rgba(212,165,52,.07),rgba(212,165,52,0) 25%,rgba(212,165,52,.07) 50%,rgba(212,165,52,0) 75%,rgba(212,165,52,.07));
}

/* ---------- Form / placeholder ---------- */
input::placeholder,textarea::placeholder{color:#a8b5cf;}

/* =========================================================
   Component classes
   ========================================================= */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:.375rem;padding:.75rem 1.25rem;
  font-size:.875rem;font-weight:600;letter-spacing:.025em;
  white-space:nowrap;user-select:none;
  transition:all .2s ease;cursor:pointer;border:0;text-decoration:none;
}
.btn-gold{background-image:var(--gradient-gold);color:var(--navy-900);box-shadow:var(--shadow-gold);}
.btn-gold:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-red{background-image:var(--gradient-red);color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);}
.btn-red:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-ghost{background:transparent;border:2px solid rgba(224,185,80,.8);color:var(--gold-200);}
.btn-ghost:hover{background:var(--gold-300);color:var(--navy-900);}
.btn-outline{background:transparent;border:2px solid var(--navy-800);color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-800);color:#fff;}
.btn-ghost-light{background:transparent;border:2px solid rgba(255,255,255,.8);color:#fff;}
.btn-ghost-light:hover{background:#fff;color:var(--ruby-700);}

/* Section eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.25em;
  color:var(--gold-500);margin-bottom:.75rem;
}
.eyebrow::before,.eyebrow::after{content:'';height:1px;width:2rem;background:var(--gold-300);}

/* Section title */
.h-title{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:28px;font-weight:700;color:var(--navy-900);
  letter-spacing:.005em;line-height:1.2;
  text-transform:uppercase;
}
@media(min-width:1024px){.h-title{font-size:32px;}}
.h-title-light{color:#fff;}

/* Rule with diamond */
.rule-d{
  margin-top:1rem;margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  color:var(--gold-400);
}
.rule-d.justify-start{justify-content:flex-start;}
.rule-d span.line{height:1px;width:3rem;background:var(--gold-300);}
.rule-d span.d{font-size:10px;}

/* Field */
.field-label{display:block;font-size:.875rem;font-weight:600;color:var(--navy-900);margin-bottom:.375rem;}
.field-input{
  width:100%;border-radius:.375rem;
  border:1px solid var(--navy-100);background:#fff;
  padding:.75rem 1rem;font-size:.875rem;color:var(--navy-900);
  transition:border-color .2s ease,box-shadow .2s ease;
  font-family:inherit;
}
.field-input:focus{border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(236,208,130,.4);}
.field-err{margin-top:.25rem;display:none;font-size:.75rem;font-weight:500;color:var(--ruby-600);}
.field-input.error{border-color:var(--ruby-400);box-shadow:0 0 0 3px rgba(251,208,210,.6);}
.field-input.error + .field-err{display:block;}

/* Lift */
.lift{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.lift:hover{transform:translateY(-4px);}

/* =========================================================
   HERO SLIDER (light banner)
   ========================================================= */
.hero-slider-box{
  min-height:640px;
  overflow:hidden;
}
@media(min-width:1024px){.hero-slider-box{min-height:620px;}}

/* =========================================================
   PAGE BANNER (sub-pages)
   ========================================================= */
.page-banner{
  position:relative;
  background:var(--navy-900);
  isolation:isolate;
}
.page-banner-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.35;z-index:-2;
}
.page-banner-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg, rgba(0,26,63,.92) 0%, rgba(10,31,67,.85) 50%, rgba(0,26,63,.92) 100%);
}
.page-banner-title{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:800;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.15;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}

/* Service detail blocks */
.svc-row{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
@media(min-width:1024px){.svc-row{grid-template-columns:1fr 1fr;gap:3.5rem;}}
.svc-row.reverse > .svc-img{order:-1;}
@media(min-width:1024px){.svc-row.reverse > .svc-img{order:2;}}
.svc-img{position:relative;aspect-ratio:4/3;border-radius:.5rem;overflow:hidden;box-shadow:var(--shadow-cardLg);}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.svc-img:hover img{transform:scale(1.04);}

/* Article styling */
.article-prose{font-family:"Be Vietnam Pro",system-ui,sans-serif;color:var(--navy-700);line-height:1.8;}

/* =========================================================
   NAV DROPDOWN (Services)
   ========================================================= */
.nav-dropdown{position:relative;}
.nav-dropdown-caret{transition:transform .25s ease;}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret{transform:rotate(180deg);}

.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  width:640px;
  max-width:calc(100vw - 2rem);
  background:#fff;
  border-radius:.625rem;
  box-shadow:0 24px 60px -16px rgba(9,26,54,.25), 0 0 0 1px rgba(212,165,52,.15);
  padding:1.25rem;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  pointer-events:none;
  z-index:60;
}
/* Pseudo-element bridges the gap so hover doesn't break */
.nav-dropdown::before{
  content:'';position:absolute;left:0;right:0;top:100%;height:14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  pointer-events:auto;
}
/* Top arrow */
.nav-dropdown-menu::before{
  content:'';
  position:absolute;
  top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:#fff;
  border-left:1px solid rgba(212,165,52,.15);
  border-top:1px solid rgba(212,165,52,.15);
}

.nav-dropdown-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.25rem;
}
.dropdown-item{
  display:flex;align-items:flex-start;gap:.875rem;
  padding:.75rem .875rem;
  border-radius:.5rem;
  color:var(--navy-800);
  transition:background .2s ease;
  text-decoration:none;
}
.dropdown-item:hover{background:var(--gold-50);}
.dropdown-item.is-active{background:var(--gold-50);}
.dropdown-item-icon{
  flex:none;
  width:34px;height:34px;border-radius:.375rem;
  background:var(--gold-50);color:var(--gold-600);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.dropdown-item:hover .dropdown-item-icon,
.dropdown-item.is-active .dropdown-item-icon{
  background-image:var(--gradient-gold);background-color:transparent;
  color:var(--navy-900);
}
.dropdown-item-text{display:flex;flex-direction:column;gap:.125rem;min-width:0;}
.dropdown-item-title{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:.95rem;font-weight:700;color:var(--navy-900);
  line-height:1.25;
}
.dropdown-item-desc{
  font-size:.75rem;color:var(--navy-500);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

.nav-dropdown-cta{
  display:block;
  margin-top:.75rem;
  padding:.75rem 1rem;
  border-radius:.5rem;
  background:var(--navy-900);
  color:var(--gold-300);
  text-align:center;
  font-size:.8rem;font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.nav-dropdown-cta:hover{background-image:var(--gradient-gold);background-color:transparent;color:var(--navy-900);}

@media(max-width:1023px){
  .nav-dropdown-menu{display:none;}
}

.article-prose > p{margin-bottom:1.1rem;}
.article-prose h2,.article-prose h3{font-family:"Source Serif 4",Georgia,serif;font-weight:700;color:var(--navy-900);margin:1.8rem 0 .8rem;line-height:1.3;}
.article-prose h2{font-size:1.5rem;}
.article-prose h3{font-size:1.2rem;}
.article-prose blockquote{border-left:4px solid var(--gold-400);background:#fbf6ec;padding:1rem 1.25rem;margin:1.25rem 0;font-style:italic;color:var(--navy-700);border-radius:0 .375rem .375rem 0;}
.article-prose ul{padding-left:1.25rem;list-style:disc;margin-bottom:1rem;}
.article-prose ul li{margin-bottom:.4rem;}
.article-prose strong{color:var(--navy-900);}
.article-prose a{color:var(--ruby-600);text-decoration:underline;}
.article-prose a:hover{color:var(--gold-600);}
.hero-title{
  font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
  font-weight:700;font-style:normal;
  font-size:32px;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--ruby-600);
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  margin-bottom:.25rem;
}
@media(min-width:1024px){.hero-title{font-size:38px;}}
.hero-tagline{
  font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
  font-weight:600;
  font-size:clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing:.16em;
  color:var(--navy-700);
  text-transform:uppercase;
}
.hero-tagline .dot{color:var(--gold-500);margin:0 .3em;font-weight:400;}

.hero-slide{
  position:absolute;top:0;left:0;right:0;bottom:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
  pointer-events:none;
}
.hero-slide.is-active{
  opacity:1;visibility:visible;
  transition:opacity .9s ease, visibility 0s linear 0s;
  pointer-events:auto;
  z-index:2;
}

/* Full-bleed background image */
.hero-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);
  transition:transform 8000ms ease-out;
  z-index:1;
}
.hero-slide.is-active .hero-bg-img{transform:scale(1.06);}

/* Left yellow overlay panel */
.hero-overlay{
  position:relative;z-index:2;
  height:100%;
  background:linear-gradient(
    to right,
    rgba(250,243,227,.98) 0%,
    rgba(250,243,227,.95) 35%,
    rgba(250,243,227,.85) 48%,
    rgba(250,243,227,.4)  60%,
    rgba(250,243,227,0)   72%
  );
}
@media(max-width:1023px){
  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(250,243,227,.98) 0%,
      rgba(250,243,227,.95) 55%,
      rgba(250,243,227,.55) 80%,
      rgba(250,243,227,0)   100%
    );
  }
}
.hero-overlay-inner{
  max-width:80rem;
  margin:0 auto;
  height:100%;
  padding:3.5rem 1rem;
  display:flex;
  align-items:center;
}
@media(min-width:640px){.hero-overlay-inner{padding:4rem 1.5rem;}}
@media(min-width:1024px){.hero-overlay-inner{padding:5rem 2rem;}}

.hero-copy{
  max-width:38rem;
  width:100%;
}

/* Dots */
.hero-dots{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:5;
}
@media(min-width:1024px){
  .hero-dots{left:2.5rem;bottom:2rem;transform:none;}
}
.hero-dots .dot{
  width:30px;height:4px;border-radius:2px;
  background:rgba(151,20,25,.25);border:0;cursor:pointer;
  transition:background .3s, width .3s;
  padding:0;
}
.hero-dots .dot.is-active{background:var(--gold-gradient,linear-gradient(135deg,#d4a534,#bf8c22));background-image:var(--gradient-gold);width:44px;}

/* Arrows */
.hero-arrow{
  position:absolute;top:auto;bottom:1.5rem;transform:none;
  width:42px;height:42px;border-radius:9999px;
  background:rgba(255,255,255,.92);color:var(--navy-800);
  display:none;align-items:center;justify-content:center;
  border:1px solid rgba(212,165,52,.4);box-shadow:var(--shadow-card);
  cursor:pointer;z-index:5;transition:all .25s ease;
}
.hero-arrow:hover{background:var(--gold-gradient);color:var(--navy-900);transform:scale(1.05);}
.hero-arrow-prev{right:5.5rem;}
.hero-arrow-next{right:1rem;}
@media(min-width:1024px){.hero-arrow{display:flex;}}

/* Light outline button (for light hero) */
.btn-outline-light{
  background:rgba(255,255,255,.85);
  border:2px solid var(--gold-400);
  color:var(--navy-800);
}
.btn-outline-light:hover{background:var(--gold-gradient);color:var(--navy-900);border-color:var(--gold-500);}

/* =========================================================
   CTA Banner (red strip on sub-pages)
   ========================================================= */
.cta-banner{
  position:relative;
  margin-top:2.5rem;
  border-radius:.75rem;
  overflow:hidden;
  background-image:var(--gradient-red);
  padding:2.25rem 2rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  color:#fff;
}
@media(min-width:768px){
  .cta-banner{
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:2.5rem 3rem;gap:2rem;
  }
}
.cta-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse at top right, rgba(212,165,52,.18), transparent 55%);
}
.cta-banner > *{position:relative;z-index:1;}
.cta-banner-title{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight:700;line-height:1.25;
  text-transform:uppercase;letter-spacing:.005em;
  color:#fff;
}
.cta-banner-desc{color:rgba(255,255,255,.85);margin-top:.5rem;font-size:.95rem;}
.cta-banner-actions{display:flex;flex-wrap:wrap;gap:.75rem;flex-shrink:0;}

/* FAQ accordions — generous padding for legibility */
details > summary{padding:1.25rem 1.5rem;}
@media(min-width:768px){details > summary{padding:1.4rem 1.75rem;}}
details > summary > span:last-child{flex:none;}
details[open] > summary{border-bottom:1px solid var(--navy-50);}
details > div{padding:1.25rem 1.5rem 1.5rem;}
@media(min-width:768px){details > div{padding:1.4rem 1.75rem 1.75rem;}}

/* override the inline tailwind px-6 py-4 / px-6 pb-5 -mt-1 on FAQ summary/divs */
details.group > summary.cursor-pointer.list-none{padding-top:1.25rem;padding-bottom:1.25rem;}
details.group > div.text-sm{padding-top:0;margin-top:-.25rem;padding-bottom:1.5rem;}

/* Section title look-alike to hero (uppercase serif) */
.section-title-up{
  font-family:"Noto Serif Display",Georgia,serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--navy-900);
  font-size:clamp(1.6rem, 3vw, 2.6rem);
  line-height:1.15;
}

/* Text gold gradient */
.text-gold-shine{
  background:linear-gradient(180deg,#f6d27a 0%,#d4a534 60%,#a37624 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 20px rgba(212,165,52,.35));
}

/* Footer h4 underline */
.foot-h4-line{position:relative;padding-bottom:.75rem;}
.foot-h4-line::after{content:'';position:absolute;left:0;bottom:0;width:2.5rem;height:2px;background-image:var(--gradient-gold);}

/* Active nav underline */
.nav-link{position:relative;padding-top:.5rem;padding-bottom:.5rem;}
.nav-link[data-active]::after,
.nav-link.is-active::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background-image:var(--gradient-gold);
}

/* =========================================================
   Responsive
   ========================================================= */
@media(min-width:640px){
  .sm\:flex{display:flex;}
  .sm\:inline-flex{display:inline-flex;}
  .sm\:inline{display:inline;}
  .sm\:hidden{display:none;}
  .sm\:flex-row{flex-direction:row;}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:w-auto{width:auto;}
  .sm\:text-3xl{font-size:1.875rem;}
  .sm\:text-4xl{font-size:2.25rem;}
  .sm\:text-6xl{font-size:3.75rem;line-height:1;}
  .sm\:py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
  .sm\:aspect-\[5\/4\]{aspect-ratio:5/4;}
  .sm\:aspect-\[5\/6\]{aspect-ratio:5/6;}
}
@media(min-width:768px){
  .md\:flex{display:flex;}
  .md\:flex-row{flex-direction:row;}
  .md\:inline-flex{display:inline-flex;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(min-width:1024px){
  .lg\:flex{display:flex;}
  .lg\:hidden{display:none;}
  .lg\:grid{display:grid;}
  .lg\:inline-flex{display:inline-flex;}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:col-span-2{grid-column:span 2/span 2;}
  .lg\:col-span-3{grid-column:span 3/span 3;}
  .lg\:gap-14{gap:3.5rem;}
  .lg\:gap-16{gap:4rem;}
  .lg\:aspect-\[4\/5\]{aspect-ratio:4/5;}
  .lg\:py-24{padding-top:6rem;padding-bottom:6rem;}
  .lg\:py-28{padding-top:7rem;padding-bottom:7rem;}
  .lg\:text-5xl{font-size:3rem;line-height:1;}
  .lg\:text-7xl{font-size:4.5rem;line-height:1;}
  .lg\:px-8{padding-left:2rem;padding-right:2rem;}
}
@media(min-width:1280px){
  .xl\:text-8xl{font-size:6rem;line-height:1;}
}