:root{
  --navy:#0f2d46; --navy2:#163d5d; --blue:#146fb3; --blue2:#0b5d99;
  --light:#eef6fb; --lighter:#f7fafc; --gold:#f2a900; --text:#18232e;
  --muted:#647381; --border:#dbe6ee; --shadow:0 12px 32px rgba(15,45,70,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;color:var(--text);line-height:1.58;background:#fff}
a{color:#075fd1}
.wrap{max-width:1180px;margin:auto;padding:0 24px}
.top{background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;padding:9px 0;font-size:15px}
.top .wrap{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;text-align:center}
.top a{color:#fff;font-weight:700}
header{background:rgba(255,255,255,.98);border-bottom:1px solid #e6edf2;position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:900;color:var(--navy);text-decoration:none;letter-spacing:.15px}
.brand::before{content:"T&T";display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:14px;letter-spacing:.4px;box-shadow:0 8px 18px rgba(15,45,70,.18)}
nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
nav a{text-decoration:none;font-weight:800;color:#075fd1;position:relative}
nav a:hover{color:var(--navy)}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--gold);transition:.2s}
nav a:hover::after{right:0}
.license{background:#e8f3fa;border-bottom:1px solid #d5e5ef;padding:12px 0}
.license .wrap{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}
.hero{background:
  radial-gradient(circle at 90% 15%, rgba(20,111,179,.12), transparent 34%),
  linear-gradient(180deg,#f2f8fc 0%,#edf5fa 100%);
  padding:72px 0 62px
}
.hero-grid,.grid2,.grid3{display:grid;gap:24px}
.hero-grid{grid-template-columns:1.2fr .8fr;align-items:center}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
h1{font-size:52px;line-height:1.03;letter-spacing:-1.6px;color:var(--navy);margin:.1em 0 .42em;max-width:850px}
h2{font-size:34px;color:var(--navy);line-height:1.15;letter-spacing:-.6px}
h3{color:var(--navy);line-height:1.25}
.lead{font-size:21px;max-width:820px;color:#263745}
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff;text-decoration:none;padding:14px 19px;border-radius:10px;font-weight:900;margin:5px 5px 5px 0;box-shadow:0 8px 20px rgba(20,111,179,.20);transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn.alt{background:linear-gradient(180deg,#ffb80d,var(--gold));color:#17202a;box-shadow:0 8px 20px rgba(242,169,0,.22)}
.card{border:1px solid var(--border);border-radius:18px;padding:25px;background:#fff;box-shadow:0 5px 18px rgba(15,45,70,.05)}
.card h3{margin-top:0}
section{padding:58px 0}
.light{background:var(--lighter)}
.chips{margin:18px 0}
.chips span{display:inline-block;padding:8px 12px;border:1px solid #c6d8e5;border-radius:999px;margin:4px;background:rgba(255,255,255,.7);font-weight:650}
.lookup{border:1px solid #cadce8;box-shadow:var(--shadow);position:relative;overflow:hidden}
.lookup::before{content:"Future Online Lookup";position:absolute;top:0;left:0;right:0;background:#dcebf5;color:var(--navy);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;padding:8px 20px}
.lookup h3{margin-top:24px}
.lookup input{width:100%;padding:13px;margin:6px 0 10px;border:1px solid #c8d2db;border-radius:7px;background:#f7f9fb}
.small{font-size:13px;color:var(--muted)}
.faq details{padding:16px 0;border-bottom:1px solid #dde4e9}
.faq summary{font-weight:800;cursor:pointer;color:var(--navy)}
footer{background:linear-gradient(90deg,var(--navy),#173b59);color:#fff;padding:40px 0}
footer a{color:#fff}
.foot{display:grid;grid-template-columns:2fr 1fr;gap:34px}
.pagehead{background:
  radial-gradient(circle at 90% 20%, rgba(20,111,179,.10), transparent 32%),
  var(--light);
  padding:55px 0
}
.pagehead h1{font-size:46px}
.breadcrumb{font-size:14px;color:var(--muted);font-weight:650}
.notice{padding:17px 19px;background:#fff8e5;border:1px solid #f0d37d;border-radius:12px}
.form-list{display:grid;gap:12px}
.form-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:17px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(15,45,70,.04)}
.form-row b{color:var(--navy)}
.cta{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.cta h2,.cta h3{color:#fff}
.cta a{color:#fff}
ul.clean{padding-left:22px}
.grid3 .card,.grid2 .card{transition:.18s}
.grid3 .card:hover,.grid2 .card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,45,70,.08)}
.mobile-call{display:none}
@media(max-width:900px){
  .hero-grid,.grid2,.grid3,.foot{grid-template-columns:1fr}
  nav{display:none}
  h1{font-size:40px;letter-spacing:-1px}
  .pagehead h1{font-size:36px}
  .brand{font-size:18px}
  .hero{padding:50px 0}
  section{padding:44px 0}
  .wrap{padding:0 18px}
  .mobile-call{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;gap:8px;background:#fff;padding:8px;border-radius:14px;box-shadow:0 10px 35px rgba(0,0,0,.18);border:1px solid #e3e8ed}
  .mobile-call a{flex:1;text-align:center;text-decoration:none;font-weight:900;padding:11px 8px;border-radius:9px}
  .mobile-call .call{background:var(--blue);color:#fff}
  .mobile-call .text{background:var(--gold);color:#17202a}
  body{padding-bottom:78px}
}