/* ============================================================
   MASTER GLOBAL IMMIGRATION — Design System
   Blue + Gold international luxury aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Color tokens ---- */
  --navy-950:#08111f;
  --navy-900:#0a1830;
  --navy-800:#0e2340;
  --royal-700:#0f3d74;
  --royal-600:#154d8e;
  --blue-500:#1e76d6;
  --blue-400:#3f93f0;
  --gold-500:#c69a46;
  --gold-400:#d8b268;
  --gold-300:#e8ce8e;
  --paper:#f7f5ef;
  --paper-dim:#eae6da;
  --ink:#0a1830;
  --ink-soft:rgba(10,24,48,.68);
  --line:rgba(10,24,48,.12);
  --line-on-dark:rgba(247,245,239,.16);

  /* ---- Type ---- */
  --f-display:'Fraunces', 'Georgia', serif;
  --f-body:'Manrope', -apple-system, sans-serif;

  /* ---- Layout ---- */
  --gutter:clamp(20px, 5vw, 72px);
  --maxw:1440px;
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.dark-scene{ background:var(--navy-950); color:var(--paper); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.wash{ position:relative; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Typography scale
   ============================================================ */
.display-1{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.6rem, 6.2vw, 6.4rem);
  line-height:.98;
  letter-spacing:-.01em;
}
.display-2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.4vw, 4.2rem);
  line-height:1.02;
  letter-spacing:-.008em;
}
.display-3{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.6rem, 2.8vw, 2.6rem);
  line-height:1.08;
}
.lede{
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(1.02rem, 1.3vw, 1.22rem);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:42ch;
}
.dark-scene .lede{ color:rgba(247,245,239,.72); }

.kicker{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:1.02rem;
  color:var(--gold-500);
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.kicker::before{
  content:'';
  width:26px; height:1px;
  background:var(--gold-500);
  display:inline-block;
}

.num-mark{
  font-family:var(--f-display);
  font-weight:400;
  font-size:.95rem;
  color:var(--gold-500);
  letter-spacing:.02em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.01em;
  padding:1rem 1.9rem;
  border-radius:1px;
  isolation:isolate;
  overflow:hidden;
}
.btn-gold{
  background:var(--gold-500);
  color:var(--navy-950);
}
.btn-gold .btn-arrow{
  width:9px;height:9px;
  border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .45s var(--ease);
}
.btn-gold:hover .btn-arrow{ transform:rotate(45deg) translate(2px,-2px); }

.btn-line{
  background:transparent;
  color:inherit;
  padding:1rem 0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  gap:.9rem;
}
.btn-line .btn-arrow{
  width:8px;height:8px;
  border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
.btn-line:hover .btn-arrow{ transform:rotate(45deg) translate(3px,-3px); }

.btn-ghost-light{
  border:1px solid rgba(247,245,239,.35);
  color:var(--paper);
  background:rgba(247,245,239,.04);
  backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{ border-color:var(--gold-400); background:rgba(198,154,70,.12); }

/* Magnetic wrapper (JS adds transform) */
.magnetic{ will-change:transform; transition:transform .25s var(--ease-soft); }

/* ============================================================
   Navigation
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:200;
  padding:26px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .5s var(--ease), background-color .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled{
  padding:14px var(--gutter);
  background:rgba(8,17,31,.72);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(247,245,239,.08);
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--paper);
}
.brand-mark{
  width:38px; height:38px;
  flex:none;
  position:relative;
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-word{
  font-family:var(--f-display);
  line-height:1.02;
}
.brand-word .l1{ display:block; font-size:1.02rem; letter-spacing:.03em; }
.brand-word .l2{ display:block; font-size:.66rem; letter-spacing:.22em; color:var(--gold-400); margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:2.6rem; }
.main-nav ul{ display:flex; gap:2.4rem; }
.main-nav a{
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:rgba(247,245,239,.82);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-400);
  transition:width .35s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--paper); }

.nav-cta{ display:flex; align-items:center; gap:1.6rem; }

.nav-burger{
  display:none;
  width:26px; height:18px;
  position:relative;
  flex-direction:column; justify-content:space-between;
}
.nav-burger span{ display:block; height:1px; background:var(--paper); width:100%; transition:transform .35s var(--ease), opacity .3s; }

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:190;
  background:var(--navy-950);
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:0 8vw;
  transform:translateY(-100%);
  transition:transform .6s var(--ease);
}
.mobile-drawer.open{ transform:translateY(0); }
.mobile-drawer ul{ display:flex; flex-direction:column; gap:1.1rem; }
.mobile-drawer a{ font-family:var(--f-display); font-size:2.2rem; color:var(--paper); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--navy-950);
  color:var(--paper);
  padding:100px var(--gutter) 30px;
  position:relative;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:64px;
  border-bottom:1px solid var(--line-on-dark);
}
.footer-brand p{ color:rgba(247,245,239,.6); max-width:32ch; margin-top:18px; font-size:.94rem; }
.footer-col h4{ font-family:var(--f-display); font-style:italic; font-weight:500; color:var(--gold-400); font-size:1rem; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ color:rgba(247,245,239,.72); font-size:.92rem; transition:color .3s; }
.footer-col a:hover{ color:var(--gold-300); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; font-size:.8rem; color:rgba(247,245,239,.45);
  flex-wrap:wrap; gap:1rem;
}
.footer-social{ display:flex; gap:1.4rem; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{ position:relative; padding:150px 0; }
.section-tight{ padding:100px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:64px;
  flex-wrap:wrap;
}

hr.rule{ border:none; height:1px; background:var(--line); margin:0; }
.dark-scene hr.rule{ background:var(--line-on-dark); }

/* Utility */
.text-gold{ color:var(--gold-500); }
.overline-line{ width:100%; height:1px; background:var(--line); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100svh;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--navy-950);
}
.hero-media{
  position:absolute; inset:0;
  z-index:1;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  filter:brightness(.62) saturate(1.05);
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,17,31,.55) 0%, rgba(8,17,31,.15) 32%, rgba(8,17,31,.25) 68%, rgba(8,17,31,.94) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:2;
  opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{
  position:relative; z-index:5;
  width:100%;
  padding:0 var(--gutter) 90px;
}
.hero-eyebrow{
  overflow:hidden;
  margin-bottom:22px;
}
.hero-eyebrow span{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-display); font-style:italic; font-weight:500;
  color:var(--gold-300); font-size:1.06rem;
}
.hero-eyebrow span::before{ content:''; width:32px; height:1px; background:var(--gold-300); }
.hero-title{
  color:var(--paper);
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(3rem, 8.6vw, 8.4rem);
  line-height:.94;
  letter-spacing:-.01em;
  max-width:15ch;
}
.hero-title .line{ overflow:hidden; padding-bottom:.06em; }
.hero-title .line > span{ display:inline-block; will-change:transform; }
.hero-title em{ font-style:italic; color:var(--gold-300); font-weight:400; }

.hero-foot{
  margin-top:46px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap;
}
.hero-sub{ color:rgba(247,245,239,.7); max-width:34ch; font-size:1rem; }
.hero-stats{ display:flex; gap:2.8rem; }
.hero-stat b{ display:block; font-family:var(--f-display); color:var(--paper); font-size:1.7rem; }
.hero-stat span{ font-size:.78rem; color:rgba(247,245,239,.55); letter-spacing:.03em; }

.scroll-cue{
  position:absolute; right:var(--gutter); bottom:32px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(247,245,239,.6);
}
.scroll-cue .track{ width:1px; height:52px; background:rgba(247,245,239,.28); position:relative; overflow:hidden; }
.scroll-cue .track i{ position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold-300); animation:scrollDrip 1.8s ease-in-out infinite; }
@keyframes scrollDrip{ 0%{ top:-40%; } 60%{ top:100%; } 100%{ top:100%; } }
.scroll-cue span{ font-size:.68rem; letter-spacing:.14em; writing-mode:vertical-rl; }

/* ============================================================
   Statement section
   ============================================================ */
.statement{
  background:var(--paper);
  padding:104px 0;
}
.statement-grid{
  display:grid;
  grid-template-columns:.9fr 1.5fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.statement-intro{
  max-width:230px;
}
.statement-side-note{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.83rem;
  line-height:1.8;
  color:var(--ink-soft);
}
.statement-main{ min-width:0; }
.statement-text{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3.15rem);
  line-height:1.16;
  letter-spacing:-.005em;
}
.statement-text .fade-word{ opacity:.24; }
.philosophy-points{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin-top:clamp(2rem, 4vw, 4rem);
  padding-top:1.15rem;
  border-top:1px solid var(--line);
}
.philosophy-points > div{
  position:relative;
  padding:1.25rem 1rem 1.15rem;
  border:1px solid transparent;
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.philosophy-points > div:hover{
  transform:translateY(-9px);
  background:#fff;
  border-color:rgba(198,154,70,.38);
  box-shadow:0 18px 35px rgba(10,24,48,.08);
}
.philosophy-points span{
  display:block;
  margin-bottom:.85rem;
  color:var(--gold-500);
  font-family:var(--f-display);
  font-size:.92rem;
}
.philosophy-points p{ color:var(--ink-soft); font-size:.8rem; line-height:1.65; }
.philosophy-points b{ display:block; color:var(--ink); font-size:.86rem; margin-bottom:.2rem; }
.statement-detail{
  display:grid;
  grid-template-columns:minmax(220px, .72fr) minmax(260px, .9fr);
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:end;
  width:min(100%, 900px);
  margin:40px 0 0 auto;
}
.statement-media{
  position:relative;
  aspect-ratio:4/5.1;
  overflow:hidden;
  align-self:start;
}
.statement-media img{
  width:100%; height:120%; object-fit:cover;
  position:relative; top:-10%;
}
.statement-media .frame-tag{
  position:absolute; left:16px; bottom:16px;
  color:var(--paper); font-size:.76rem; letter-spacing:.04em;
  background:rgba(8,17,31,.55); padding:8px 12px; backdrop-filter:blur(6px);
}

/* ============================================================
   Destinations — horizontal scroll storytelling
   ============================================================ */
.destinations{
  background:var(--navy-950);
  color:var(--paper);
  position:relative;
}
.dest-pin{ height:100vh; overflow:hidden; position:relative; }
.dest-head{
  position:absolute; top:80px; left:var(--gutter); z-index:6;
  max-width:520px;
}
.dest-track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center;
  will-change:transform;
  padding-left:var(--gutter);
}
.dest-panel{
  flex:none;
  width:min(72vw, 640px);
  height:66vh;
  margin-right:28px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.dest-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.dest-panel:hover img{ transform:scale(1.06); }
.dest-panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,17,31,.88), rgba(8,17,31,0) 55%); }
.dest-panel-info{ position:relative; z-index:2; padding:30px; }
.dest-panel-info .num-mark{ color:var(--gold-300); }
.dest-panel-info h3{ font-family:var(--f-display); font-size:2rem; margin-top:8px; }
.dest-panel-info p{ color:rgba(247,245,239,.72); margin-top:8px; font-size:.92rem; max-width:32ch; }
.dest-progress{
  position:absolute; bottom:56px; left:var(--gutter); right:var(--gutter);
  height:1px; background:rgba(247,245,239,.2); z-index:6;
}
.dest-progress i{ display:block; height:100%; width:0%; background:var(--gold-400); }

/* ============================================================
   Why section
   ============================================================ */
.why{
  background:var(--paper);
  padding:104px 0;
}
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem, 5vw, 5rem); align-items:center; }
.why-media{ position:relative; aspect-ratio:5/5.7; overflow:hidden; }
.why-media img{ width:100%; height:100%; object-fit:cover; }
.why-badge{
  position:absolute; bottom:-1px; right:-1px;
  background:var(--gold-500); color:var(--navy-950);
  padding:22px 25px; text-align:right;
}
.why-badge b{ display:block; font-family:var(--f-display); font-size:2.4rem; line-height:1; }
.why-badge span{ font-size:.72rem; letter-spacing:.03em; }
.why-list{ margin-top:28px; display:flex; flex-direction:column; }
.why-item{
  display:grid; grid-template-columns:48px 1fr; gap:16px;
  padding:18px 0; border-top:1px solid var(--line);
}
.why-item:last-child{ border-bottom:1px solid var(--line); }
.why-item .num-mark{ font-size:1rem; }
.why-item h4{ font-family:var(--f-display); font-size:1.22rem; line-height:1.15; margin-bottom:5px; }
.why-item p{ color:var(--ink-soft); font-size:.88rem; max-width:44ch; }

/* ============================================================
   Categories showcase (home preview)
   ============================================================ */
.cat-showcase{ background:var(--navy-950); color:var(--paper); padding:160px 0; }
.cat-rows{ display:flex; flex-direction:column; }
.cat-row{
  display:grid; grid-template-columns:.7fr 2fr 1fr;
  align-items:center; gap:2rem;
  padding:34px 0;
  border-top:1px solid var(--line-on-dark);
  position:relative;
  overflow:hidden;
}
.cat-rows .cat-row:last-child{ border-bottom:1px solid var(--line-on-dark); }
.cat-row .num-mark{ color:var(--gold-300); }
.cat-row h3{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.8rem, 3.4vw, 3rem);
  transition:transform .5s var(--ease), color .5s;
}
.cat-row p{ color:rgba(247,245,239,.55); font-size:.9rem; max-width:38ch; }
.cat-row-link{
  justify-self:end; display:flex; align-items:center; gap:10px;
  font-size:.85rem; font-weight:600; color:var(--paper);
  opacity:0; transform:translateX(-10px);
  transition:opacity .4s, transform .4s;
}
.cat-row:hover h3{ transform:translateX(14px); color:var(--gold-300); }
.cat-row:hover .cat-row-link{ opacity:1; transform:translateX(0); }
.cat-row-media{
  position:fixed; z-index:50; pointer-events:none;
  width:280px; height:190px; overflow:hidden;
  opacity:0; top:0; left:0;
}
.cat-row-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   Sub-category preview strip
   ============================================================ */
.subcat-strip{ background:var(--paper); padding:150px 0; }
.subcat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); margin-top:0; }
.subcat-card{
  background:var(--paper); padding:38px 26px; position:relative; overflow:hidden;
  min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
}
.subcat-card .bg-fade{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity .6s var(--ease);
}
.subcat-card:hover .bg-fade{ opacity:1; }
.subcat-card:hover .bg-fade::after{ content:''; }
.subcat-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,17,31,.7), rgba(8,17,31,0) 60%);
  opacity:0; transition:opacity .5s;
}
.subcat-card:hover::before{ opacity:1; }
.subcat-card > *{ position:relative; z-index:2; }
.subcat-card .num-mark{ color:var(--gold-500); transition:color .4s; }
.subcat-card:hover .num-mark{ color:var(--gold-300); }
.subcat-card h4{ font-family:var(--f-display); font-size:1.3rem; margin-top:12px; transition:color .4s; }
.subcat-card:hover h4{ color:var(--paper); }
.subcat-card p{ font-size:.85rem; color:var(--ink-soft); margin-top:8px; transition:color .4s; }
.subcat-card:hover p{ color:rgba(247,245,239,.8); }

/* ============================================================
   Agents showcase (home)
   ============================================================ */
.agents-preview{ background:var(--navy-950); color:var(--paper); padding:160px 0; }
.agent-marquee{ overflow:hidden; margin-top:60px; }
.agent-track{ display:flex; gap:26px; width:max-content; }
.agent-tile{
  width:300px; flex:none; position:relative; overflow:hidden; aspect-ratio:3/4;
}
.agent-tile img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.85); transition:filter .5s; }
.agent-tile:hover img{ filter:grayscale(0) brightness(1); }
.agent-tile-info{ position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(0deg, rgba(8,17,31,.92), rgba(8,17,31,0)); }
.agent-tile-info h5{ font-family:var(--f-display); font-size:1.15rem; }
.agent-tile-info span{ font-size:.78rem; color:var(--gold-300); }

/* ============================================================
   CTA
   ============================================================ */
.cta-band{
  position:relative; height:80vh; min-height:520px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; background:var(--navy-950);
}
.cta-band .hero-media img{ transform:scale(1.05); filter:brightness(.4); }
.cta-content{ position:relative; z-index:4; color:var(--paper); }
.cta-content .display-1{ max-width:16ch; margin:0 auto; }
.cta-content .btn{ margin-top:40px; }

/* ============================================================
   Inner-page hero banner (Categories / Sub-categories / Agents)
   ============================================================ */
.page-banner{
  position:relative; height:64vh; min-height:440px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--navy-950); overflow:hidden;
}
.page-banner .hero-media img{ transform:scale(1.1); }
.page-banner-inner{ position:relative; z-index:5; padding:0 var(--gutter) 70px; }
.breadcrumb{ display:flex; align-items:center; gap:.6em; font-size:.82rem; color:rgba(247,245,239,.55); margin-bottom:20px; }
.breadcrumb a{ color:rgba(247,245,239,.8); }
.breadcrumb a:hover{ color:var(--gold-300); }
.page-banner-title{ color:var(--paper); font-family:var(--f-display); font-size:clamp(2.6rem,6vw,5.6rem); line-height:.98; }
.page-banner-sub{ color:rgba(247,245,239,.7); max-width:46ch; margin-top:20px; font-size:1rem; }

/* ============================================================
   CATEGORIES page
   ============================================================ */
.cat-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:36px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.cat-search{ position:relative; flex:1; max-width:380px; }
.cat-search input{
  width:100%; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:10px 26px 10px 0; font-family:var(--f-body);
  font-size:1rem; color:var(--ink); outline:none;
}
.cat-search input::placeholder{ color:var(--ink-soft); }
.cat-search svg{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.6; }
.cat-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.cat-filter-btn{
  font-size:.82rem; font-weight:600; padding:9px 18px;
  border:1px solid var(--line); color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.cat-filter-btn.active, .cat-filter-btn:hover{ background:var(--navy-950); color:var(--paper); border-color:var(--navy-950); }

.cat-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:190px;
  gap:2px; margin-top:2px;
}
.cat-block{
  position:relative; overflow:hidden; grid-column:span 3; grid-row:span 2;
  background:var(--navy-900);
}
.cat-block.tall{ grid-row:span 3; }
.cat-block.wide{ grid-column:span 6; }
.cat-block.small{ grid-column:span 2; grid-row:span 2; }
.cat-block img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .8s var(--ease), filter .5s; filter:brightness(.72); }
.cat-block:hover img{ transform:scale(1.1); filter:brightness(.5); }
.cat-block::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,17,31,.85) 0%, rgba(8,17,31,.05) 55%); }
.cat-block-body{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--paper); }
.cat-block-top{ position:absolute; top:20px; left:26px; right:26px; z-index:2; display:flex; justify-content:space-between; }
.cat-block-body h3{ font-family:var(--f-display); font-size:clamp(1.3rem,2vw,1.9rem); }
.cat-block-body p{ font-size:.85rem; color:rgba(247,245,239,.68); margin-top:8px; max-width:34ch; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.cat-block:hover .cat-block-body p{ opacity:1; transform:translateY(0); }
.cat-block-arrow{
  width:38px; height:38px; border:1px solid rgba(247,245,239,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .5s var(--ease);
}
.cat-block:hover .cat-block-arrow{ background:var(--gold-500); border-color:var(--gold-500); transform:rotate(45deg); }
.cat-block-arrow svg{ width:14px; height:14px; }
.cat-block-count{ font-size:.72rem; color:rgba(247,245,239,.6); letter-spacing:.04em; }

/* ============================================================
   SUB-CATEGORIES page
   ============================================================ */
.subcat-context{
  display:flex; align-items:center; gap:20px; padding:60px 0 10px;
}
.subcat-context img{ width:64px; height:64px; object-fit:cover; border-radius:50%; }
.subcat-context .kicker{ margin-bottom:4px; }

.subcat-list{ margin-top:40px; }
.subcat-row{
  display:grid; grid-template-columns:100px 1.4fr 1.8fr 140px;
  align-items:center; gap:2rem;
  padding:32px 0; border-top:1px solid var(--line);
  position:relative;
}
.subcat-list .subcat-row:last-child{ border-bottom:1px solid var(--line); }
.subcat-row-media{ width:100px; height:76px; overflow:hidden; position:relative; }
.subcat-row-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform .6s var(--ease); }
.subcat-row:hover .subcat-row-media img{ transform:scale(1.3); }
.subcat-row h3{ font-family:var(--f-display); font-size:1.5rem; transition:color .3s; }
.subcat-row:hover h3{ color:var(--royal-700); }
.subcat-row p{ font-size:.9rem; color:var(--ink-soft); }
.subcat-row-cta{ justify-self:end; display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--royal-700); }
.subcat-row-cta svg{ width:12px; height:12px; transition:transform .4s var(--ease); }
.subcat-row:hover .subcat-row-cta svg{ transform:translateX(4px); }

/* ============================================================
   AGENTS page — editorial, non-card layout
   ============================================================ */
.agent-feature{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0;
  margin-bottom:2px;
  background:var(--paper);
}
.agent-feature:nth-child(even){ direction:rtl; }
.agent-feature:nth-child(even) > *{ direction:ltr; }
.agent-feature-media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.agent-feature-media img{ width:100%; height:100%; object-fit:cover; }
.agent-feature-body{ padding:70px; display:flex; flex-direction:column; justify-content:center; background:var(--navy-950); color:var(--paper); }
.agent-feature-body .kicker{ margin-bottom:20px; }
.agent-feature-body h3{ font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.6rem); }
.agent-feature-body .role{ color:var(--gold-300); font-size:.95rem; margin-top:8px; }
.agent-feature-body .bio{ color:rgba(247,245,239,.7); margin-top:22px; max-width:44ch; font-size:.96rem; line-height:1.65; }
.agent-meta-row{ display:flex; gap:2.6rem; margin-top:34px; padding-top:28px; border-top:1px solid var(--line-on-dark); flex-wrap:wrap; }
.agent-meta-item span{ display:block; font-size:.72rem; color:rgba(247,245,239,.5); letter-spacing:.03em; margin-bottom:6px; }
.agent-meta-item b{ font-family:var(--f-display); font-size:1.15rem; font-weight:400; }
.agent-feature-body .btn{ margin-top:36px; align-self:flex-start; }

.agent-strip-head{ padding:150px 0 0; }

/* Availability dot */
.avail-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; background:#5cc38b; }
.avail-dot.busy{ background:var(--gold-400); }