:root{
  /* Layout */
  --radius:16px;
  --max:1100px;

  /* Panels */
  --panel:rgba(255,255,255,.22);
  --panel2:rgba(255,255,255,.14);

  /* Typography */
  --text:#1C232A;
  --muted:rgba(28,35,42,.74);

  /* Strokes and depth */
  --stroke:rgba(255,255,255,.56);
  --stroke2:rgba(70,55,35,.14);
  --strokeHover:rgba(255,255,255,.78);

  --shadow:0 14px 44px rgba(30,22,15,.20);
  --shadowSoft:0 10px 26px rgba(30,22,15,.12);
  --shadowHover:0 22px 54px rgba(30,22,15,.24);

  /* Accents */
  --brand:#D4A354;   /* champagne gold */
  --teal:#2A8C86;    /* restrained teal */
  --coral:#C85B4A;   /* sunrise coral */
  --cocoa:#9E6430;   /* bronze */

  /* Premium glass controls */
  --glassBlur:16px;
  --glassBlurSoft:12px;
  --noiseOpacity:.055;
}

/* Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--cocoa)}
.container{max-width:var(--max);margin:0 auto;padding:24px}

/* Body background */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;

  background:
    linear-gradient(180deg, rgba(245,232,214,.38), rgba(226,206,171,.48)),
    radial-gradient(900px 520px at 18% 32%, rgba(212,163,84,.18), transparent 58%),
    radial-gradient(900px 520px at 22% 42%, rgba(200,91,74,.08), transparent 62%),
    radial-gradient(820px 560px at 70% 65%, rgba(42,140,134,.07), transparent 64%),
    url("/images/fiber-optic-inlet.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* Premium subtle film grain across page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--noiseOpacity);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:soft-light;
}

body > *{position:relative;z-index:1}

/* Card system */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14));
  border:1px solid var(--stroke);
  border-bottom-color:rgba(70,55,35,.12);
  border-right-color:rgba(70,55,35,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
  transition: box-shadow .22s ease, border-color .22s ease, transform .15s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.50;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(255,255,255,.60), transparent 62%),
    radial-gradient(820px 320px at 82% 10%, rgba(212,163,84,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(30,22,15,.05), rgba(30,22,15,.02));
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.40;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 52%),
    radial-gradient(900px 420px at 50% 110%, rgba(42,140,134,.06), transparent 55%);
}

.card > *{
  position:relative;
  z-index:1;
}

.card:hover{
  box-shadow:var(--shadowHover);
  border-color:var(--strokeHover);
  transform:translateY(-1px);
}

.panel{
  padding:20px;
  background:rgba(255,255,255,.10);
}

/* Header nav */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(245,232,214,.55);
  backdrop-filter: blur(calc(var(--glassBlur) + 2px));
  -webkit-backdrop-filter: blur(calc(var(--glassBlur) + 2px));
  border-bottom:1px solid rgba(70,55,35,.10);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  max-width:var(--max);
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:-.2px;
  color:var(--text);
}

.brandMark{
  display:inline-flex;
  align-items:center;
  line-height:0;
}

.brandMark svg{
  width:30px;
  height:36px;
  color:var(--brand);
}

.brandMark svg path{
  stroke:var(--brand);
}

.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.navlinks a{
  padding:9px 14px;
  border-radius:999px;
  color:rgba(28,35,42,.78);
  font-weight:800;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.navlinks a:hover{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.70);
  color:var(--text);
  transform:translateY(-1px);
}

.navlinks a.active{
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.78);
  color:var(--text);
}

/* Headings */
.h1{
  font-size:clamp(1.55rem, 2.5vw, 2.1rem);
  line-height:1.18;
  margin:0 0 14px 0;
  letter-spacing:-.5px;
  color:#1C232A;
  text-shadow:0 10px 22px rgba(255,255,255,.55);
}

.h2{
  font-size:24px;
  margin:0 0 10px 0;
  color:#1C232A;
  text-shadow:0 10px 22px rgba(255,255,255,.45);
}

.lead{
  color:rgba(28,35,42,.78);
  font-size:16px;
  margin:0 0 18px 0;
  line-height:1.6;
  text-shadow:0 10px 22px rgba(255,255,255,.35);
}

h3{color:var(--cocoa)}

/* Hero */
.hero{padding:32px 0 40px 0}

.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  align-items:start;
}

@media (max-width: 900px){
  .heroGrid{grid-template-columns:1fr}
}

/* Hero box */
.heroBox{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.68);
}

.heroBox::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,163,84,.20), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(42,140,134,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(30,22,15,.03));
  opacity:1;
}

/* Buttons */
.actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
  align-items:flex-start;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  text-align:center;
  cursor:pointer;

  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.56);
  box-shadow:0 10px 24px rgba(30,22,15,.14);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.78);
  box-shadow:0 14px 30px rgba(30,22,15,.16);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(30,22,15,.12);
}

/* Button color intent, text color only to keep it premium */
.btn.red{color:#7E2A22}
.btn.green{color:#1F5B56}
.btn.orange{color:#2A5B78}

.btn.red:hover{
  background:linear-gradient(135deg, rgba(200,91,74,.22), rgba(255,255,255,.22));
}
.btn.green:hover{
  background:linear-gradient(135deg, rgba(42,140,134,.18), rgba(255,255,255,.22));
}
.btn.orange:hover{
  background:linear-gradient(135deg, rgba(212,163,84,.18), rgba(255,255,255,.22));
}

/* Index hero button refinement */
.hero .actions .btn{
  width:100%;
  max-width:420px;
}

/* Badges */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
  justify-content:center;
}

.badge{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.56);
  background:rgba(255,255,255,.12);
  color:rgba(28,35,42,.78);
  font-size:12px;
  font-weight:900;
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

/* Small crest mark in hero */
.heroMark{
  margin-top:26px;
  display:flex;
  justify-content:center;
  opacity:.22;
  pointer-events:none;
}

.heroMark svg{
  width:64px;
  height:auto;
  color:var(--brand);
}

.heroMark svg path{
  stroke:var(--brand);
  stroke-width:2.4;
}

/* KPI grid */
.kpi{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width: 520px){
  .kpi{grid-template-columns:1fr}
}

.kpi .box{
  border:1px solid rgba(255,255,255,.56);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border-radius:12px;
  padding:12px;
  position:relative;
  text-align:center;
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

.kpi .big{
  font-size:20px;
  font-weight:950;
  margin:0;
  color:#1C232A;
}

.kpi .small{
  color:rgba(28,35,42,.70);
  margin:6px 0 0 0;
  font-size:13px;
}

/* Social */
.socialBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.socialIcons{
  display:flex;
  gap:8px;
  margin-top:6px;
  justify-content:center;
}

.socialIcons a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.56);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.socialIcons a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.34);
  border-color:rgba(255,255,255,.78);
}

.socialIcons svg{
  width:18px;
  height:18px;
  fill:rgba(42,46,51,.68);
}

.socialIcons a:hover svg{
  fill:rgba(42,46,51,.86);
}

/* Quote notice */
.quote{
  font-style:italic;
  position:relative;
  padding-left:18px;
}

.quote::before{
  content:"“";
  position:absolute;
  left:0;
  top:-6px;
  font-size:40px;
  color:var(--brand);
  line-height:1;
}

.notice{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.56);
  background:rgba(255,255,255,.10);
  color:rgba(28,35,42,.72);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

/* Sections */
.section{padding:22px 0}

.baseSection{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.36);
}

.baseWrap{
  position:relative;
  padding:18px;
  border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.56);
  box-shadow:var(--shadowSoft);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

@media (max-width: 900px){
  .grid3{grid-template-columns:1fr}
}

.service h3{margin:0 0 8px 0}
.service p{margin:0;color:rgba(28,35,42,.74)}
.service .tagRow{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

.tag{
  font-size:12px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.56);
  background:rgba(255,255,255,.10);
  color:rgba(28,35,42,.70);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

/* Base service color hints */
.baseGreen{border-top:3px solid rgba(42,140,134,.50)}
.baseYellow{border-top:3px solid rgba(212,163,84,.60)}
.baseRed{border-top:3px solid rgba(200,91,74,.50)}

/* Headshot */
.headshotWrap{
  position:relative;
  width:100%;
  max-width:300px;
  margin:0 auto;
}

.headshot{
  width:100%;
  max-width:300px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:14px;
  border:1px solid rgba(212,163,84,.66);
  box-shadow:0 18px 44px rgba(30,22,15,.16);
  background:rgba(255,255,255,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.headshot:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 56px rgba(30,22,15,.18);
  border-color:rgba(212,163,84,.90);
}

/* Forms */
form{
  display:grid;
  gap:12px;
  margin-top:14px;
}

label{
  font-weight:900;
  font-size:14px;
  color:#1C232A;
}

input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.56);
  background:rgba(255,255,255,.12);
  color:#1C232A;
  outline:none;
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

textarea{min-height:140px;resize:vertical}

/* Contact layout */
.contactGrid{
  display:grid;
  grid-template-columns: 70% 30%;
  gap:18px;
}

@media (max-width: 900px){
  .contactGrid{grid-template-columns:1fr}
}

.contactSide{
  font-size:15px;
  color:rgba(28,35,42,.74);
  background:rgba(255,255,255,.08);
}

.contactSide p{margin-top:0}

/* ABOUT PAGE LAYOUT */
.aboutWrap{padding:22px}

.aboutGrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:22px;
  align-items:start;
}

@media (max-width: 980px){
  .aboutGrid{grid-template-columns:1fr}
}

.aboutLeft{
  display:flex;
  flex-direction:column;
  gap:14px;
}

@media (min-width: 981px){
  .aboutLeft{
    position:sticky;
    top:96px;
    align-self:start;
  }
}

.aboutContent{min-width:0}

.availabilityCard{
  border:1px solid rgba(255,255,255,.56);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadowSoft);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}

.availabilityCard h3{
  margin:0 0 10px 0;
  color:#1C232A;
}

.availabilityCard p{
  margin:0 0 12px 0;
  color:rgba(28,35,42,.74);
}

.availabilityList{
  margin:0 0 14px 18px;
  padding:0;
  color:rgba(28,35,42,.74);
}

.availabilityList li{margin:6px 0}

.resumeText p{color:rgba(28,35,42,.74)}

.resumeText ul{
  margin:10px 0 0 18px;
  color:rgba(28,35,42,.74);
}

/* Focus states */
.btn:focus-visible,
.navlinks a:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(212,163,84,.55);
  outline-offset:3px;
  border-radius:14px;
}

/* Footer */
footer{
  margin-top:60px;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.36);
  color:rgba(28,35,42,.70);
  font-size:13px;
  font-weight:750;
}

.footerRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

@media (max-width: 520px){
  .footerRow{flex-direction:column;align-items:flex-start}
}

/* Premium Domain Table */
.domainTableWrap{
  border:1px solid rgba(255,255,255,.56);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-radius:var(--radius);
  padding:16px;
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
  box-shadow:var(--shadowSoft);
}

.domainTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.domainTable th{
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.56);
  font-weight:900;
  color:var(--text);
}

.domainTable th.priceCol{
  text-align:right;
}

.domainTable td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:background .2s ease, transform .15s ease;
  vertical-align:top;
}

.domainTable tbody tr{
  cursor:pointer;
}

.domainTable tbody tr:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.domainTable tr:last-child td{
  border-bottom:none;
}

.domainTableTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.domainTableControls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* Premium Domain Highlight */

.domainHighlight{
  margin-bottom:22px;
  padding:18px 20px;
  border-radius:var(--radius);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.26),
    rgba(255,255,255,.14)
  );

  border:1px solid rgba(255,255,255,.62);

  box-shadow:var(--shadowSoft);

  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));

  position:relative;
  overflow:hidden;
}

.domainHighlight::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 18% 25%, rgba(212,163,84,.24), transparent 60%),
    radial-gradient(circle at 82% 30%, rgba(42,140,134,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%);

  opacity:.9;
}

.domainHighlight > *{
  position:relative;
  z-index:1;
}

.domainHighlight h3{
  margin:0 0 10px 0;
  font-size:20px;
  color:#1C232A;
  letter-spacing:-.2px;
}

.domainHighlight p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:rgba(28,35,42,.78);
}
.domainHighlight::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:var(--radius);

  background:linear-gradient(
      120deg,
      rgba(212,163,84,.35),
      rgba(212,163,84,0) 40%,
      rgba(42,140,134,0) 60%,
      rgba(42,140,134,.25)
  );

  opacity:.35;
  z-index:-1;
  filter:blur(6px);
}

.sortBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.50);
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-weight:800;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.sortBtn:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.75);
  transform:translateY(-1px);
}

.sortBtn.isActive{
  border-color:rgba(42,140,134,.55);
  background:rgba(42,140,134,.12);
}

.domainTopLine{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.domainName{
  font-weight:950;
  letter-spacing:.2px;
  color:var(--text);
}

.domainDesc{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}

.tagPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:950;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.50);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(var(--glassBlurSoft));
  -webkit-backdrop-filter: blur(var(--glassBlurSoft));
}

.tagPill.offer{
  border-color:rgba(42,140,134,.55);
  background:rgba(42,140,134,.10);
  color:#0f4c47;
}

.tagPill.premium{
  border-color:rgba(212,163,84,.60);
  background:rgba(212,163,84,.10);
  color:#7a4b1f;
}

.price{
  text-align:right;
  font-weight:950;
  color:var(--brand);
  white-space:nowrap;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .card,
  .btn,
  .navlinks a,
  .socialIcons a,
  .sortBtn{
    transition:none;
  }
}