/* =========================================================
   CIRCLE C TECHNOLOGIES
   Palette derived from the brand mark's own ink:
   slate iron + ember orange. Signage-condensed display,
   mono utility labels. No stacked 100vh stages.
   ========================================================= */

/* ---------- self-hosted fonts (works offline) ---------- */
@font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:600;
  font-display:swap; src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:600;
  font-display:swap; src:url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root{
  --ink:      #14191E;   /* base dark            */
  --iron:     #1E262D;   /* logo ink / surfaces  */
  --iron-2:   #262F38;   /* raised surface       */
  --bone:     #EDEAE4;   /* light sections       */
  --bone-2:   #E2DED6;   /* light surface        */
  --ember:    #C2551A;   /* brand orange         */
  --ember-lt: #E2712F;
  --sun:      #E9A13B;
  --signal:   #4FB39A;   /* status / ok          */
  --mute:     rgba(237,234,228,.62);
  --mute-d:   rgba(20,25,30,.62);
  --line:     rgba(237,234,228,.14);
  --line-d:   rgba(20,25,30,.14);

  --display: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --body:    "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(64px, 8vw, 108px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--bone);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; width:100%; }

/* ---------- type ---------- */

.d-hero{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(46px,6.6vw,86px);
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.d-big{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.0;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.ember{ color:var(--ember-lt); }

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--sun);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:16px; height:16px; flex:none;
  border:1.5px solid var(--ember); border-radius:50%;
  border-right-color:transparent;      /* a small open circle-C */
  transform:rotate(-30deg);
}
.lede{ font-size:clamp(16.5px,1.5vw,18.5px); color:var(--mute); max-width:56ch; }
.lede.center{ margin:0 auto; }
.sec-sub{ color:var(--mute); max-width:58ch; margin-top:14px; }

.sec-head{ margin-bottom:clamp(36px,4.5vw,56px); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:12.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  padding:14px 26px;
  border-radius:2px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-ember{ background:var(--ember); color:#fff; }
.btn-ember:hover{ background:var(--ember-lt); box-shadow:0 0 0 1px var(--ember-lt), 0 10px 30px rgba(194,85,26,.32); }
.btn-line{ border-color:var(--line); color:var(--bone); }
.btn-line:hover{ border-color:var(--bone); }
.btn-line-dark{ border-color:var(--line-d); color:var(--ink); }
.btn-line-dark:hover{ border-color:var(--ink); background:rgba(20,25,30,.05); }

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sun); outline-offset:3px;
}

/* ---------- scroll reveal ---------- */

[data-rise]{ opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
[data-rise].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-rise]{ opacity:1; transform:none; transition:none; }
  .sweep,.ring{ animation:none !important; }
}

/* ---------- nav ---------- */

.nav{
  position:sticky; top:0; z-index:900;
  background:rgba(20,25,30,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1180px; margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; gap:26px;
}
.nav-brand{ flex:none; }
.nav-brand img{ height:26px; width:auto; }
.nav-links{ display:flex; gap:26px; list-style:none; margin-left:auto; }
.nav-links a{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); text-decoration:none;
  transition:color .18s ease;
}
.nav-links a:hover,.nav-links a.active{ color:var(--sun); }
.nav-cta{ padding:10px 18px; flex:none; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span{ width:20px; height:1.5px; background:var(--bone); }

/* ---------- hero ---------- */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,7vw,86px) 0 clamp(64px,8vw,100px);
  background:
    radial-gradient(ellipse 70% 90% at 82% 40%, rgba(194,85,26,.20), transparent 62%),
    radial-gradient(ellipse 60% 70% at 8% 10%, rgba(38,47,56,.9), transparent 60%),
    var(--ink);
}
.hero-in{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
.hero-copy{ max-width:600px; }
.d-hero{ margin-bottom:20px; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 34px; }

.ticks{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px;
  padding-top:24px; border-top:1px solid var(--line); }
.ticks li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute);
  display:flex; align-items:center; gap:8px;
}
.ticks li::before{ content:""; width:5px; height:5px; background:var(--signal); border-radius:50%; }

/* signature: coverage rings sweeping around the brand mark */
.hero-art{ display:flex; justify-content:center; align-items:center; }
.radar{ position:relative; width:min(430px,84vw); aspect-ratio:1; display:grid; place-items:center; }
.ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(237,234,228,.11);
  animation:pulse 7s ease-out infinite;
}
.r1{ inset:34%; animation-delay:0s; }
.r2{ inset:23%; animation-delay:1.75s; }
.r3{ inset:12%; animation-delay:3.5s; }
.r4{ inset:0;   animation-delay:5.25s; }
@keyframes pulse{
  0%{ opacity:0; transform:scale(.86); }
  22%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.1); }
}
.sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(194,85,26,0) 0deg, rgba(194,85,26,0) 260deg, rgba(194,85,26,.28) 348deg, rgba(233,161,59,.45) 360deg);
  mask-image:radial-gradient(circle, transparent 26%, #000 27%);
  -webkit-mask-image:radial-gradient(circle, transparent 26%, #000 27%);
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.radar-mark{ position:relative; width:34%; height:auto; z-index:2;
  transform:translate(-3.7%,2.8%);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)); }

/* ---------- services / tiles ---------- */

.services{ padding:var(--pad) 0; background:var(--ink); border-top:1px solid var(--line); }
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.tile{
  position:relative; overflow:hidden;
  background:var(--iron);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 22px 24px;
  display:flex; flex-direction:column;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
/* the heat line: hairline across the top that fires to ember on hover */
.tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ember),var(--sun));
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.tile:hover::before,.tile:focus-within::before{ transform:scaleX(1); }
.tile:hover{ background:var(--iron-2); border-color:rgba(194,85,26,.4); transform:translateY(-3px); }

.tile-label{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--sun); margin-bottom:14px;
}
.tile h3{
  font-family:var(--display); font-weight:600;
  font-size:26px; line-height:1.05; text-transform:uppercase;
  letter-spacing:.01em; margin-bottom:12px;
}
.tile-hook{ color:var(--ember-lt); font-weight:500; font-size:15px; margin-bottom:12px; }
.tile-body{ color:var(--mute); font-size:14.5px; line-height:1.6; flex-grow:1; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.chips li{
  font-family:var(--mono); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mute);
  border:1px solid var(--line); border-radius:2px;
  padding:4px 8px;
}

/* ---------- process ---------- */

.process{ padding:var(--pad) 0; background:var(--bone); color:var(--ink); }
.process .sec-sub,.process .lede{ color:var(--mute-d); }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line-d); border:1px solid var(--line-d); }
.steps li{ background:var(--bone); padding:34px 30px 38px; }
.step-n{
  display:block; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; color:var(--ember); margin-bottom:18px;
}
.steps h3{ font-family:var(--display); font-weight:700; font-size:27px;
  text-transform:uppercase; letter-spacing:.01em; margin-bottom:10px; }
.steps p{ color:var(--mute-d); font-size:15px; }

/* ---------- plans ---------- */

.plans{ padding:var(--pad) 0; background:var(--bone-2); color:var(--ink); }
.plans .sec-sub{ color:var(--mute-d); }
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.plan{
  position:relative; background:var(--bone);
  border:1px solid var(--line-d); border-radius:3px;
  padding:34px 28px 30px;
  display:flex; flex-direction:column;
}
.plan-hot{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.plan-flag{
  position:absolute; top:-1px; right:-1px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ember); color:#fff; padding:6px 12px;
}
.plan h3{ font-family:var(--display); font-weight:700; font-size:32px;
  text-transform:uppercase; letter-spacing:.01em; }
.plan-rate{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ember); margin:2px 0 14px;
}
.plan-hot .plan-rate{ color:var(--sun); }
.plan-desc{ font-size:15px; color:var(--mute-d); margin-bottom:20px; }
.plan-hot .plan-desc{ color:var(--mute); }
.plan ul{ list-style:none; flex-grow:1; margin-bottom:26px;
  border-top:1px solid var(--line-d); padding-top:18px; }
.plan-hot ul{ border-top-color:var(--line); }
.plan li{ position:relative; padding-left:20px; font-size:14.5px; margin-bottom:9px; color:var(--mute-d); }
.plan-hot li{ color:var(--mute); }
.plan li::before{ content:""; position:absolute; left:0; top:.66em;
  width:7px; height:7px; border-radius:50%; background:var(--signal); }
.plan .btn{ width:100%; }

/* ---------- quotes ---------- */

.quotes{ padding:0 0 var(--pad); background:var(--bone-2); color:var(--ink); }
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.quotes figure{
  background:var(--bone); border:1px solid var(--line-d); border-radius:3px;
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
}
.quotes blockquote{ font-size:17px; line-height:1.5; font-weight:500; }
.quotes blockquote::before{ content:"“"; font-family:var(--display); font-size:44px;
  color:var(--ember); line-height:0; display:block; height:22px; }
.quotes figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute-d); margin-top:auto; }

/* ---------- area ---------- */

.area{
  padding:var(--pad) 0; text-align:center;
  background:
    radial-gradient(ellipse 55% 70% at 50% 118%, rgba(194,85,26,.30), transparent 64%),
    var(--ink);
}
.area .eyebrow{ justify-content:center; }
.cities{ list-style:none; font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(16px,2vw,22px); color:var(--mute);
  max-width:760px; margin:26px auto 0; line-height:1.9;
  display:flex; flex-wrap:wrap; justify-content:center; column-gap:1.1em; }
.cities li{ position:relative; white-space:nowrap; }
/* separator dot after every city except the last, including at line ends */
.cities li:not(:last-child)::after{
  content:""; position:absolute; right:-.55em; top:50%;
  width:4px; height:4px; margin:-2px 0 0 -2px;
  background:var(--ember); border-radius:50%;
}
.area-note{ color:var(--mute); font-size:15px; margin-top:20px; }

/* ---------- faq ---------- */

.faq{ padding:var(--pad) 0; background:var(--ink); border-top:1px solid var(--line); }
.faq-wrap{ max-width:820px; }
.faq-list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 4px;
  font-family:var(--display); font-size:22px; font-weight:600;
  text-transform:uppercase; letter-spacing:.01em;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  transition:color .18s ease;
}
.faq summary:hover{ color:var(--sun); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--ember);
  font-size:22px; flex:none; transition:transform .25s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 4px 22px; color:var(--mute); font-size:15.5px; max-width:66ch; }

/* ---------- contact ---------- */

.contact{
  padding:var(--pad) 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 0%, rgba(194,85,26,.22), transparent 62%),
    radial-gradient(ellipse 55% 60% at 88% 90%, rgba(233,161,59,.14), transparent 62%),
    var(--iron);
  text-align:center;
}
.contact-wrap{ max-width:760px; }
.contact .eyebrow{ justify-content:center; }
.contact .d-big{ margin-bottom:14px; }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); max-width:520px;gap:12px; margin:36px auto 22px; }
.card{
  background:rgba(237,234,228,.05); border:1px solid var(--line); border-radius:3px;
  padding:18px 20px; text-align:left; text-decoration:none;
  display:flex; flex-direction:column; gap:3px;
  transition:background .18s ease, border-color .18s ease;
}
a.card:hover{ background:rgba(237,234,228,.09); border-color:var(--ember); }
.card span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sun); }
.card b{ font-size:17px; font-weight:600; }

.form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form input,.form textarea{
  background:rgba(237,234,228,.05);
  border:1px solid var(--line); border-radius:3px;
  padding:14px 16px; color:var(--bone);
  font-family:var(--body); font-size:15.5px; resize:vertical;
  transition:border-color .18s ease, background .18s ease;
}
.form ::placeholder{ color:rgba(237,234,228,.4); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--ember); background:rgba(237,234,228,.08); }
.form .btn{ align-self:center; margin-top:10px; padding-left:40px; padding-right:40px; }
.form-note{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; min-height:18px; color:var(--signal); text-align:center; }
.form-note.bad{ color:var(--sun); }

/* ---------- footer ---------- */

.footer{ background:var(--ink); border-top:1px solid var(--line); padding:40px 0 34px; }
.footer-in{ display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap; }
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-brand img{ height:30px; width:auto; }
.footer-brand p{ font-size:13px; color:var(--mute); line-height:1.6; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mute); text-decoration:none; }
.footer-nav a:hover{ color:var(--sun); }
.copy{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; color:var(--mute); }

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .radar{ width:min(320px,72vw); }
  .steps,.plan-grid,.quote-grid,.cards{ grid-template-columns:1fr; }
  .steps{ gap:1px; }
  .plan-hot{ order:-1; }
}
@media (max-width:760px){
  .nav-links{
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:rgba(20,25,30,.98);
    border-bottom:1px solid var(--line);
    padding:6px 0 14px; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; padding:14px 24px; font-size:13px; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .frow{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .footer-in{ flex-direction:column; }
}