/* Lone Star Immigration — Option D layout, Larsen Immigration Law colors (slate, navy, sand) */
:root{--teal:#24475B;--teal-d:#172448;--deep:#172448;--mint:#F4F0E2;--line:#DDD6BE;--sun:#D7CFB1;--sun-l:#EDE6CC;--ink:#161514;--muted:#3C444A;--slate:#587487}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Roboto",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:18px;line-height:1.6}
body.lang-en [lang="es"]:not(html),body.lang-es [lang="en"]:not(html){display:none!important}
h1,h2,h3{font-family:"League Spartan","Roboto",sans-serif;color:var(--deep);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:800;margin-top:1.4em}
h3{font-size:1.15rem;font-weight:800;margin-top:1.3em}
p{margin:0 0 1em}
a{color:var(--teal)}a:hover{color:var(--teal-d)}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* header and drop-down menus */
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--teal);text-decoration:none;font-weight:800;font-size:1.25rem;white-space:nowrap;margin-right:auto}
.navrow{border-top:1px solid var(--line)}
nav.main{display:flex;align-items:center;justify-content:space-between;gap:0;flex-wrap:nowrap;min-height:52px}
.nav-item{position:relative}
.nav-top{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border-radius:22px;color:var(--deep);font-weight:600;font-size:.97rem;text-decoration:none;white-space:nowrap}
.nav-top:hover,.nav-item:focus-within .nav-top{background:var(--mint);color:var(--deep)}
.menu{display:none;position:absolute;top:100%;left:0;z-index:40;width:320px;max-height:70vh;overflow:auto;padding:10px;margin-top:4px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 14px 36px rgba(23,36,72,.16)}
.nav-item:nth-last-of-type(-n+2) .menu{left:auto;right:0}
.nav-item:hover .menu,.nav-item:focus-within .menu{display:block}
.menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:1rem;line-height:1.35}
.menu a:hover{background:var(--mint)}
.langs{display:flex;padding:4px;border-radius:26px;background:var(--mint)}
.langs button{min-height:40px;min-width:44px;padding:0 12px;border:0;border-radius:20px;background:transparent;color:var(--teal);font:600 15px "Roboto",sans-serif;cursor:pointer}
body.lang-en .langs [data-lang="en"],body.lang-es .langs [data-lang="es"]{background:var(--teal);color:#fff}
.menubtn{display:none;background:none;border:0;color:var(--teal);cursor:pointer;min-width:44px;min-height:44px}
@media(max-width:1180px){
  .menubtn{display:block}
  .navrow{display:none;border-top:1px solid var(--line)}
  .navrow.open{display:block}
  nav.main{flex-direction:column;align-items:stretch;padding:8px 0 16px}
  .menu,.nav-item:hover .menu,.nav-item:focus-within .menu{display:none}
  .caret{display:none}
}
/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:10px 26px;border-radius:26px;line-height:1.25;font-weight:600;font-size:1.05rem;text-decoration:none}
.btn.teal{background:var(--teal);color:#fff}.btn.teal:hover{background:var(--teal-d);color:#fff}
.btn.sun{background:var(--sun);color:var(--ink)}.btn.sun:hover{background:#C9BF9A;color:var(--ink)}
.btn.line{border:2px solid #fff;color:#fff}
.btn.line.dark{border-color:var(--teal);color:var(--teal)}

/* homepage */
.heroWrap{padding-top:24px}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px;align-items:center;padding:48px;border-radius:24px;background:var(--mint)}
.hero h1{margin:0 0 18px}
.lead{font-size:1.2rem;color:var(--muted);margin-bottom:24px}
.heroArt{width:100%;height:auto}
#topics{padding-top:40px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px;min-height:140px;border-radius:18px;border:2px solid var(--line);text-decoration:none;color:var(--deep)}
.tile:hover{border-color:var(--teal);color:var(--deep)}
.ico{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--sun-l)}
.tname{font-weight:800;font-size:1.2rem;line-height:1.2}
.more{margin-top:20px}
.band{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:40px;padding:32px;border-radius:24px;background:var(--teal);color:#fff}
.band h2{color:#fff;margin:0 0 6px}
.band p{margin:0;color:#FFF6D8}
@media(max-width:600px){.hero{padding:28px}.band{padding:24px}}

/* inner pages */
.guide{display:grid;grid-template-columns:1fr 320px;gap:48px;padding-top:36px;padding-bottom:64px}
@media(max-width:900px){.guide{grid-template-columns:1fr}}
.crumb{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--muted)}
.lead2{font-size:1.15rem;color:var(--muted)}
article ul,article ol{padding-left:1.3em;margin:0 0 1em}
article li{margin-bottom:.45em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:24px 0 8px}
.card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:2px solid var(--line);text-decoration:none;color:var(--deep);font-weight:600;line-height:1.3}
.card:hover{border-color:var(--teal);color:var(--deep)}
.arrow{color:var(--teal)}
.overview{margin-top:32px;padding-top:8px;border-top:1px solid var(--line)}
.alert{background:#FBF6E6;border-left:5px solid #B89B4E;padding:16px 20px;border-radius:8px;margin:20px 0}
.note{background:var(--mint);border-left:5px solid var(--teal);padding:16px 20px;border-radius:8px;margin:20px 0}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:16px!important}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.reviewed{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:28px}
.sibs{margin-top:32px}
.sibs ul{columns:2;column-gap:32px;padding-left:1.1em}
@media(max-width:600px){.sibs ul{columns:1}}
aside .box{background:var(--teal);color:#FFF6D8;border-radius:20px;padding:24px;position:sticky;top:96px}
aside .box h3{color:#fff;margin-top:0}
aside .box .btn{display:flex;justify-content:center;text-align:center;margin-top:8px}
aside .box small{display:block;margin-top:14px;font-size:.88rem;line-height:1.45}
aside .box small a{color:#fff;white-space:nowrap}

/* footer (frozen content) */
footer{margin-top:56px;border-top:1px solid var(--line);background:#F7F7F7;color:var(--muted);font-size:.95rem;line-height:1.55}
footer .wrap{padding-top:36px;padding-bottom:36px}
footer .adv{font-weight:600;color:var(--ink)}
footer .links{margin:0}
@media(max-width:520px){
  .bar{gap:8px}
  .brand{font-size:1.05rem;white-space:normal;line-height:1.1;gap:8px}
  .brand svg{width:32px;height:32px;flex:none}
  .langs button{min-width:40px;padding:0 8px}
}

.linkbox{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 20px}
.linkbox .btn{min-height:44px;font-size:.98rem}
.tablewrap{overflow-x:auto}
table.fac{border-collapse:collapse;width:100%;font-size:.98rem}
table.fac th,table.fac td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
table.fac th{background:var(--mint);color:var(--deep)}

.ntadoc{position:relative;margin:16px 0 8px;padding:24px 26px;background:#FFFEF8;border:1px solid #C9C2A8;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.06);font-family:"Courier New",Courier,monospace;font-size:.86rem;line-height:1.5;color:#222;overflow:hidden}
.ntastamp{position:absolute;top:18px;right:-40px;transform:rotate(18deg);background:#B3261E;color:#fff;font:700 13px "Roboto",sans-serif;letter-spacing:.12em;padding:4px 48px}
.ntahead{text-align:center;margin-bottom:14px;font-weight:700;padding:0 64px}
.ntatitle{font-size:1.25rem;letter-spacing:.06em;margin-top:4px}
.ntarow{position:relative;padding:10px 0 10px 36px;border-top:1px dashed #D8D2BC}
.ntarow .n{position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font:700 13px "Roboto",sans-serif;display:flex;align-items:center;justify-content:center}
.ntadoc .box{font-family:"Roboto",sans-serif}
.ntafoot{border-top:1px dashed #D8D2BC;padding-top:10px;font-size:.8rem;color:#555}

.ntadoc .tr{margin-top:6px;font-family:"Roboto",sans-serif;font-size:.85rem;font-style:italic;color:#6B6B6B;line-height:1.45}
.ntahead .tr{font-weight:400;margin-top:6px}

.illus{margin:8px 0 24px;max-width:560px}
.illus img{display:block;width:100%;height:auto;border-radius:18px}

.flow{display:flex;gap:10px;align-items:stretch;margin:8px 0 14px}
.fstep{flex:1;padding:14px 16px;border-radius:14px;background:var(--mint);border:2px solid var(--line)}
.fstep.dark{background:var(--teal);border-color:var(--teal);color:#FFF6D8}
.fstep .fk{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.fstep.dark .fk{color:var(--sun)}
.fstep .ft{font-family:"League Spartan","Roboto",sans-serif;font-weight:700;font-size:1.1rem;color:var(--deep);margin:2px 0 4px}
.fstep.dark .ft{color:#fff}
.fstep .fd{font-size:.95rem;line-height:1.45}
.farrow{display:flex;align-items:center;color:var(--slate);font-size:1.5rem}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.path{padding:16px 18px;border-radius:16px;border:2px solid var(--slate)}
.path .pt{font-family:"League Spartan","Roboto",sans-serif;font-weight:700;font-size:1.05rem;color:var(--teal);margin-bottom:8px}
.path ol{margin:0 0 10px;padding-left:1.2em;font-size:.97rem}
.pwarn{padding:10px 12px;border-radius:10px;background:#FBF6E6;font-size:.92rem;color:var(--muted)}
@media(max-width:760px){.flow{flex-direction:column}.farrow{transform:rotate(90deg);justify-content:center}.paths{grid-template-columns:1fr}}

.screens{display:grid;gap:18px;margin:8px 0 6px}
.screens figure{margin:0;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(23,36,72,.06)}
.screens figure.narrow{max-width:320px}
.screens img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid #E5E5E5}
.screens figcaption{margin-top:10px;font-size:.95rem;color:var(--muted)}
/* Small drawings beside section entries on inner pages */
.entry{display:flow-root}
.entry .spot{float:right;width:120px;height:120px;margin:4px 0 12px 20px}
@media (max-width:600px){.entry .spot{width:84px;height:84px;margin-left:14px}}
.guide .spot.free{float:right;width:120px;height:120px;margin:4px 0 12px 20px}
@media (max-width:600px){.guide .spot.free{width:84px;height:84px;margin-left:14px}}

/* Homepage load animation (Option 1, approved Nov 8 2026). Plays once; off for reduced-motion users. */
@media (prefers-reduced-motion: no-preference){
 .home .brand svg path{transform-origin:20px 20px;animation:lsTwinkle 1.6s ease-out .3s both}
 .home .heroArt path:nth-of-type(1){transform-origin:290px 110px;animation:lsTwinkle 1.8s ease-out .6s both}
 @keyframes lsTwinkle{0%{transform:scale(.2) rotate(-45deg);opacity:0}60%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
 .home .heroText>*{animation:lsRise .7s ease-out both}
 .home .heroText>*:nth-child(2){animation-delay:.15s}.home .heroText>*:nth-child(3){animation-delay:.3s}
 .home .tile{animation:lsRise .5s ease-out both}
 .home .tile:nth-child(1){animation-delay:0.48s}
 .home .tile:nth-child(2){animation-delay:0.56s}
 .home .tile:nth-child(3){animation-delay:0.64s}
 .home .tile:nth-child(4){animation-delay:0.72s}
 .home .tile:nth-child(5){animation-delay:0.80s}
 .home .tile:nth-child(6){animation-delay:0.88s}
 .home .tile:nth-child(7){animation-delay:0.96s}
 .home .tile:nth-child(8){animation-delay:1.04s}
 .home .tile:nth-child(9){animation-delay:1.12s}
 @keyframes lsRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{min-width:0;overflow-wrap:anywhere}}