:root {
  --ink: #071917;
  --ink-2: #0d2a27;
  --ink-3: #173c37;
  --paper: #faf9f5;
  --paper-2: #f0eee6;
  --white: #faf9f5;
  --lime: #d9ff55;
  --mint: #8ee8ce;
  --coral: #ff7557;
  --muted: #58706c;
  --line: rgba(7, 25, 23, .14);
  --display: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
  --accent: var(--lime);
  --accent-soft: rgba(217, 255, 85, .13);
  --accent-deep: #4d6b00;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--display); margin: 0; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
::selection { background: var(--accent); color: var(--ink); }
.shell { margin-inline: auto; width: min(1240px, calc(100% - 48px)); }
.skip-link { background: var(--lime); left: 12px; padding: 12px 16px; position: fixed; top: -100px; z-index: 100; }
.skip-link:focus { top: 12px; }

.site-header { background: rgba(250,249,245,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.nav { align-items: center; display: flex; height: 76px; justify-content: space-between; }
.nav .button { padding: 10px 16px; }
.brand { align-items: center; display: inline-flex; font-size: 14px; font-weight: 800; gap: 10px; letter-spacing: -.03em; min-height: 44px; }
.brand-mark { border-radius: 14px; display: inline-flex; flex-shrink: 0; height: 54px; overflow: hidden; transform: rotate(-6deg); width: 54px; }
.brand-mark img { display: block; height: 100%; width: 100%; }
.nav-links { align-items: center; display: flex; gap: 20px; }
.nav-links > a:not(.button) { font-size: 12px; font-weight: 700; }
.nav-links > a:not(.button):hover { color: #37635b; }
.button { align-items: center; border: 0; border-radius: 999px; display: inline-flex; font-size: 13px; font-weight: 800; gap: 12px; justify-content: center; padding: 15px 19px; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: #fff; }
.button-primary { background: var(--accent); color: var(--ink); }
.button-outline { border: 1px solid rgba(7,25,23,.22); color: var(--ink); }
.nav-call { align-items: center; color: var(--ink); display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; letter-spacing: -.02em; margin-left: auto; margin-right: 18px; }
.nav-call:hover { color: var(--coral); }
.nav-call-icon { display: inline-flex; }
.nav-call-icon svg { height: 16px; width: 16px; }
.menu-toggle { background: none; border: 0; display: none; height: 44px; padding: 9px; width: 44px; }
.menu-toggle i { background: var(--ink); display: block; height: 2px; margin: 6px auto; transition: .2s ease; width: 23px; }
.menu-toggle.active i:first-child { transform: translateY(8px) rotate(45deg); }.menu-toggle.active i:nth-child(2) { opacity: 0; }.menu-toggle.active i:last-child { transform: translateY(-8px) rotate(-45deg); }

.service-fiber { --accent: #8ee8ce; --accent-soft: rgba(142,232,206,.14); --accent-deep: #0d6b56; }
.service-security { --accent: #ff7557; --accent-soft: rgba(255,117,87,.14); --accent-deep: #c33c1e; }
.service-access { --accent: #ffd66b; --accent-soft: rgba(255,214,107,.14); --accent-deep: #8a6410; }
.service-wifi { --accent: #9fbfff; --accent-soft: rgba(159,191,255,.15); --accent-deep: #2b53b8; }
.service-racks { --accent: #d9ff55; --accent-soft: rgba(217,255,85,.13); --accent-deep: #4d6b00; }

.service-hero { background: var(--white); color: var(--ink); overflow: hidden; padding: 32px 0 86px; position: relative; }
.breadcrumb { color: var(--muted); display: flex; flex-wrap: wrap; font: 500 9px/1.4 var(--mono); gap: 9px; letter-spacing: .07em; margin-bottom: 58px; position: relative; text-transform: uppercase; z-index: 2; }
.breadcrumb a:hover { color: var(--ink); }.breadcrumb span { color: rgba(7,25,23,.35); }
.service-hero-grid { display: grid; grid-template-columns: 1fr; position: relative; z-index: 2; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.5rem, 6.6vw, 7.2rem); letter-spacing: -.085em; line-height: .92; margin: 0; max-width: none; }
h1 em { color: var(--accent-deep); font-style: normal; }
/* Sized off the widest of the six titles — "Security cameras wired and
   recording." needs 16.66px of width per 1px of font-size (the others run
   14.3-15.9). The shell is the viewport less ~63px, so this holds one line
   down to 981px. Below that one line would mean a ~20px heading, so it
   wraps instead. */
@media (min-width: 981px) { h1 { font-size: min(calc(5.85vw - 4px), 72px); white-space: nowrap; } }
.hero-lead { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; margin: 30px 0 0; max-width: 55ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }


.content-section { padding: 110px 0; }
.content-section.alt { background: var(--paper); }
.section-head { align-items: end; display: grid; gap: 18px; grid-template-columns: auto minmax(0, 1fr); margin-bottom: 52px; }
/* The heading column is sized to the wrapped text, not the 10ch the rest of
   the h2s use, so the intro sits beside the words instead of past an empty
   strip of heading box. */
.section-head h2 { max-width: 8ch; }
/* The properties section keeps the wide split, with its intro out at the
   right edge. */
#properties .section-head { gap: 4.5vw; grid-template-columns: 1fr 1.05fr; }
#properties .section-head h2 { max-width: 10ch; }
h2 { font-size: clamp(2.6rem, 5vw, 5.2rem); letter-spacing: -.075em; line-height: .98; margin-bottom: 0; max-width: 10ch; }
.section-intro { color: var(--ink); font-size: 1.05rem; line-height: 1.75; margin-bottom: 4px; max-width: 55ch; }
.deliver-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.deliver-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(7,25,23,.05), 0 14px 30px -20px rgba(7,25,23,.4); min-height: 180px; padding: 32px 30px; transition: box-shadow .25s ease, transform .25s ease; }
.deliver-card:hover { box-shadow: 0 2px 4px rgba(7,25,23,.06), 0 24px 44px -22px rgba(7,25,23,.5); transform: translateY(-3px); }
.deliver-card h3 { font-size: 18px; letter-spacing: -.04em; margin: 0 0 12px; }
.deliver-card p { color: var(--ink); font-size: 15px; line-height: 1.65; margin-bottom: 0; }

.use-grid { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
.use-card { border-radius: 22px; min-height: 430px; overflow: hidden; padding: 42px; position: relative; }
.use-card.commercial { background: var(--ink); color: #fff; }.use-card.residential { background: var(--white); border: 1px solid var(--line); }
.use-card::after { background: var(--accent-soft); border-radius: 50%; content: ""; height: 320px; position: absolute; right: -120px; top: -110px; width: 320px; }
.use-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.045em; line-height: 1.08; margin: 0 0 28px; max-width: 15ch; position: relative; z-index: 1; }
.use-list { list-style: none; margin: 0; max-width: 42ch; padding: 0; position: relative; z-index: 1; }
.use-list li { border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.6; padding: 15px 0; }
.commercial .use-list li { border-color: rgba(255,255,255,.14); color: #cddfd9; }


.details-grid { align-items: start; display: grid; gap: 8vw; grid-template-columns: .75fr 1.25fr; }
.details-copy h2 { max-width: 9ch; }
.details-copy p { color: var(--ink); line-height: 1.75; margin-top: 25px; }
.detail-list { border-top: 1px solid var(--line); }
.detail-row { border-bottom: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 145px 1fr; padding: 22px 0; }
.detail-row strong { font-size: 15px; }.detail-row p { color: var(--ink); font-size: 15px; line-height: 1.6; margin: 0; }

.faq-grid { display: grid; gap: 8vw; grid-template-columns: .7fr 1.3fr; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; padding: 24px 38px 24px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { color: var(--coral); content: "+"; font-size: 22px; font-weight: 400; position: absolute; right: 5px; top: 20px; }
details[open] summary::after { content: "-"; }
details p { color: var(--ink); font-size: 15px; line-height: 1.75; margin: -5px 40px 24px 0; }


.cta { background: var(--accent); color: var(--ink); padding: 90px 0; }
.cta-grid { align-items: center; display: grid; gap: 8vw; grid-template-columns: 1fr auto; }
.cta h2 { font-size: clamp(3rem, 6vw, 6.5rem); max-width: 10ch; }.cta p { font-size: 16px; line-height: 1.65; margin: 25px 0 0; max-width: 50ch; }.cta .button { background: var(--ink); color: #fff; padding: 18px 24px; }

footer { background: #04110f; color: #91aaa2; padding: 31px 0; }
.footer-grid { align-items: center; display: grid; font: 400 9px/1.5 var(--mono); gap: 25px; grid-template-columns: 1fr auto 1fr; letter-spacing: .04em; text-transform: uppercase; }
footer .brand { color: #fff; font-family: var(--display); text-transform: none; }.footer-links { display: flex; gap: 17px; justify-self: end; }.footer-links a:hover { color: var(--lime); }
.footer-links a, .footer-grid > span a { align-items: center; display: inline-flex; min-height: 44px; }
.footer-grid > span a { border-bottom: 1px solid rgba(255,255,255,.22); color: #c9ddd6; }
.footer-grid > span a:hover { border-bottom-color: var(--lime); color: var(--lime); }

/* The nav needs ~1006px to sit on one line, so it collapses well before
   the 760px used for the rest of the layout. */
@media (max-width: 1100px) {
  .nav { height: 80px; }.nav-call { margin-right: 8px; min-height: 44px; }.menu-toggle { display: block; }.nav-links { align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; inset: 80px 0 auto; padding: 18px 20px 24px; position: absolute; }.nav-links.open { display: flex; }.nav-links > a:not(.button) { border-bottom: 1px solid var(--line); font-size: 15px; padding: 17px 4px; }.nav-links .button { margin-top: 17px; width: 100%; }
}
@media (max-width: 980px) {
  .service-hero-grid, .section-head, .details-grid, .faq-grid { grid-template-columns: 1fr; }
  .deliver-grid { grid-template-columns: repeat(2,1fr); }.use-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }.cta-grid .button { width: fit-content; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 620px); }
  .service-hero { padding: 25px 0 65px; }.breadcrumb { margin-bottom: 42px; }h1 { font-size: clamp(3.6rem, 16vw, 6rem); }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }
  .content-section { padding: 80px 0; }.deliver-grid { grid-template-columns: 1fr; }.deliver-card { min-height: 0; }.use-card { min-height: 400px; padding: 30px; }.detail-row { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; }.footer-links { justify-self: start; }
}
@media (max-width: 480px) {
  .nav-call-number { display: none; }.nav-call { height: 44px; justify-content: center; margin-right: 2px; width: 44px; }.nav-call-icon svg { height: 20px; width: 20px; }
}
@media (max-width: 480px) {
  h1 { font-size: 3.65rem; }h2 { font-size: 2.8rem; }.cta h2 { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Touch targets: breadcrumbs stay compact but reach the 24px AA minimum. */
.breadcrumb a { align-items: center; display: inline-flex; min-height: 26px; }

/* ---- SEO: H1 kicker + local service-area section ------------------------ */
.h1-kicker { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; margin-bottom: 18px; text-transform: uppercase; color: var(--muted); }
.local-grid { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.local-grid h2 { margin-bottom: 18px; }
.local-call { font-weight: 700; margin: 18px 0 0; }
.local-call a { border-bottom: 2px solid var(--accent); }
.related-services { border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.related-services h3 { font: 500 11px/1 var(--mono); letter-spacing: .1em; margin: 0 0 10px; text-transform: uppercase; }
.related-services ul { list-style: none; margin: 0; padding: 0; }
.related-services li + li { border-top: 1px solid var(--line); }
.related-services a { align-items: center; display: flex; font-weight: 700; justify-content: space-between; min-height: 44px; }
.related-services a:hover { color: var(--accent-deep); }
@media (max-width: 760px) { .local-grid { gap: 28px; grid-template-columns: 1fr; } }
.breadcrumb span[aria-current] { color: var(--muted); }
@media (max-width: 760px) { .site-header .brand-mark { height: 44px; width: 44px; } }
.site-header .brand { font-size: 25px; gap: 14px; letter-spacing: -.04em; }
@media (max-width: 760px) { .site-header .brand { font-size: 19px; gap: 11px; } }
/* Larger desktop nav text (Ahmet, 2026-11-02) */
@media (min-width: 1280px) {
  .site-header .nav-trigger, .site-header .nav-links > a:not(.button), .site-header .nav-call { font-size: 15px; }
  .site-header .nav-links .button { font-size: 14px; padding: 11px 18px; }
  .site-header .nav-links { gap: 24px; }
}
/* Phone number sits in the menu next to Contact on desktop; the separate icon stays for the mobile header */
.nav-links > a.nav-call-inline { align-items: center; color: var(--ink); display: inline-flex; font-weight: 700; gap: 8px; letter-spacing: -.02em; white-space: nowrap; }
.nav-call-inline svg { height: 17px; width: 17px; }
@media (min-width: 1101px) { .site-header .nav-call { display: none; } .nav-links { margin-left: auto; } }
@media (max-width: 1100px) { .nav-links > a.nav-call-inline { display: none; } }
@media (min-width: 981px) { h1 { white-space: normal; } h1 em { display: block; } }
.service-page h1 em { color: var(--ink); }
.service-page .button-primary { background: var(--lime); color: var(--ink); }
.use-card::after { content: none; display: none; }
.service-page .cta { background: var(--lime); color: var(--ink); }
.local-call a { border-bottom-color: var(--ink); }
.site-header { background: var(--paper); }
.site-header .nav-links > a:not(.button) { color: var(--ink); font-weight: 700; }
@media (max-width: 980px) { #properties .section-head { gap: 18px; grid-template-columns: 1fr; } #properties .section-head h2 { max-width: none; } }