/* ===========================================================
   Pro Clean & Fix — foundation
   Bright / clean / minimal. White base, electric blue accent.
   Structure borrowed loosely from the T1 reference in DESIGN.md:
   whisper-light display type, oversized image radii, pill buttons,
   square-prefixed section labels, no shadows — but inverted to a
   white canvas with the brand blue as the single accent.
   =========================================================== */

@import url('fonts.css');

:root{
  /* surfaces */
  --white:      #ffffff;
  --ice:        #f4f7fb;   /* cool near-white section tint */
  --ice-2:      #e8eff8;
  --line:       #e3e9f2;
  --line-2:     #c9d2de;

  /* ink */
  --ink:        #16202e;   /* deep cool navy — never pure black */
  --ink-2:      #46536a;
  --muted:      #5f6e84;   /* 5.2:1 on white, 4.8:1 on ice — WCAG AA for small text */

  /* accent — from the logo's electric blue */
  --blue:       #0a6cff;
  --blue-deep:  #0052d6;
  --blue-bright:#5ba4ff;
  --blue-wash:  #eaf2ff;

  /* placeholder highlight (unconfirmed copy) */
  --ph:         #b8791a;
  --ph-bg:      #fdf5e7;

  /* type */
  --display: 'Sora', 'Avenir Next', 'Segoe UI', sans-serif;
  --body:    'Manrope', 'Avenir', 'Segoe UI', sans-serif;
  --punch:   'Archivo', 'Helvetica Neue', sans-serif;   /* wordmark: real italic, plain ampersand */

  /* geometry */
  --r-img: 80px;
  --r-card: 24px;
  --r-pill: 100px;
  --r-sm: 12px;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color: var(--blue); text-decoration:none; }
a:hover{ color: var(--blue-deep); }

/* ---------- type ---------- */
.display{
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
}
.display strong{ font-weight:600; }
.display em{ font-style:normal; color: var(--blue); }

.lede{
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* square-prefixed section label — the reference's signature device */
.label{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.16em; color: var(--ink-2); margin:0;
}
.label::before{
  content:''; width:5px; height:5px; background: var(--blue); flex:none;
}
.label.on-dark{ color: rgba(255,255,255,.82); }
.label.on-dark::before{ background: var(--blue-bright); }

/* section titles keep the label's blue square, scaled to the type size */
.sq{ display:flex; align-items:center; gap:.42em; }
.sq::before{ content:''; width:.2em; height:.2em; background:var(--blue); flex:none; }
.sq.center{ justify-content:center; }
.sq.on-dark::before{ background:var(--blue-bright); }


/* ---------- accessibility ---------- */
/* keyboard focus: visible on everything, only when navigating by keyboard */
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline-offset:4px; }
input:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
/* skip link: offscreen until it gets focus, then sits at the top */
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--blue); color:#fff;
  font-weight:600; padding:12px 18px; border-radius:var(--r-sm); text-decoration:none; }
.skip:focus{ top:16px; }
#content:focus{ outline:none; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--body); font-size:15px; font-weight:600;
  padding:17px 26px; border-radius: var(--r-pill);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  min-height:52px; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg{ flex:none; }

.btn-call{ background: var(--blue); color:#fff; }
.btn-call:hover{ background: var(--blue-deep); color:#fff; }

.btn-ghost{ background:transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); color: var(--ink); }

.btn-ghost-light{ background:transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover{ background:#fff; color: var(--ink); border-color:#fff; }

.btn-white{ background:#fff; color: var(--ink); }
.btn-white:hover{ background: var(--ice-2); color: var(--ink); }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- logo ----------
   Rebuilt from the business card: steel PC monogram inside a blue orbital
   swoosh, splash at the lower left, squeegee exiting upper right. The metal
   is pitched dark so it holds on a white ground instead of going to mud. */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
img.logo-mark{ height:48px; width:auto; flex:none; }
.logo-type{ display:flex; flex-direction:column; line-height:1; }

.logo-name{
  font-family: var(--punch);
  font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:19px; letter-spacing:-0.012em; white-space:nowrap;
}
.logo-name .pro{ color:#2c3542; }
.logo-name .cf{ color: var(--blue); }

/* letterspaced sub-line held between two rules, as on the card */
.logo-sub{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:7.5px; font-weight:700; letter-spacing:0.3em;
  text-transform:uppercase; color: var(--muted); white-space:nowrap;
}
.logo-sub::before, .logo-sub::after{
  content:''; height:1px; background: var(--line-2, #c9d2de); flex:1 1 auto; min-width:8px;
}

/* on blue / dark grounds the steel inverts to white so it stays legible */
.logo.on-dark .logo-name .pro{ color:#fff; }
.logo.on-dark .logo-name .cf{ color:#bcdcff; }
.logo.on-dark .logo-sub{ color:rgba(255,255,255,.62); }
.logo.on-dark .logo-sub::before,
.logo.on-dark .logo-sub::after{ background:rgba(255,255,255,.28); }
.logo.on-dark .logo-mark .mono{ fill:#fff; }
.logo.on-dark .logo-mark .squeegee{ stroke:#dbe7f7; }
.logo.on-dark .logo-mark .blade{ fill:#dbe7f7; }
.logo.on-dark .logo-mark .ring{ stroke:#8fc0ff; }
.logo.on-dark .logo-mark .drop{ fill:#8fc0ff; }
.logo.on-dark .logo-mark .blade-edge{ stroke:#0a6cff; }

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width: var(--maxw); margin:0 auto; padding: 22px var(--pad);
}
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{
  font-size:13.5px; font-weight:500; color: var(--ink-2); letter-spacing:0.005em;
}
.nav-links a:hover{ color: var(--blue); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-phone{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--display); font-weight:500; font-size:15.5px;
  color: var(--ink); letter-spacing:-0.005em; white-space:nowrap;
}
.nav-phone:hover{ color: var(--blue); }
.nav-phone svg{ color: var(--blue); }
.nav.on-dark .nav-links a{ color: rgba(255,255,255,.8); }
.nav.on-dark .nav-links a:hover{ color:#fff; }
.nav.on-dark .nav-phone{ color:#fff; }
.nav.on-dark .nav-phone svg{ color: var(--blue-bright); }

/* Services hover dropdown — every service listed, one click from any page.
   The trigger link is only ~72px wide, but the panel below it is 248px and
   centered, so it overhangs both sides. A cursor moving diagonally toward an
   off-center link used to cross a stretch that was neither the trigger's own
   narrow box nor the panel yet, dropping :hover before the click could land.
   ::after is a full-width invisible bridge, sized and centered exactly like
   the panel, filling that whole diagonal-travel zone as one hoverable piece. */
.nav-item{ position:relative; }
.nav-item::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:248px; height:20px;
}
.nav-drop-trigger{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ width:12px; height:12px; flex:none; transition:transform .16s ease; }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item.open .nav-caret{ transform:rotate(180deg); }

.nav-drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  margin-top:20px; padding:10px; width:248px;
  background:var(--blue); border:1px solid var(--blue-deep); border-radius:var(--r-card);
  box-shadow:0 12px 32px -8px rgba(10,60,140,.45);
  display:grid; grid-template-columns:1fr; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:30;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.open .nav-drop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-drop a{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:calc(var(--r-sm) + 2px); font-size:13.5px; font-weight:500;
  color:#fff; white-space:nowrap;
}
.nav-drop a:hover{ background:rgba(255,255,255,.16); color:#fff; }
.nav-drop svg{ width:17px; height:17px; flex:none; color:#fff; }

.btn-sm{ padding:12px 20px; min-height:44px; font-size:14px; }

/* ---------- trust strip ---------- */
.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  font-size:13px; font-weight:500; color: var(--muted);
}
.trust span{ display:inline-flex; align-items:center; gap:8px; }
.trust svg{ color: var(--blue); flex:none; }
.trust.on-dark{ color: rgba(255,255,255,.72); }
.trust.on-dark svg{ color: var(--blue-bright); }

/* ---------- unconfirmed-copy placeholder ---------- */
.ph{
  background: var(--ph-bg); color: var(--ph);
  border-bottom:1.5px dashed currentColor; padding:0 3px;
  font-style:normal; border-radius:3px;
}

/* a headline-scale placeholder stays readable — dashed rule, no highlight block */
.display .ph, .punch .ph{
  background:none; color:inherit; padding:0;
  border-bottom:2px dashed var(--ph);
}

/* ---------- utility ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.hero{ position:relative; }

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .nav-right .btn{ display:none; }
}
/* mobile menu: hidden on desktop, where the link row does the job */
.nav-toggle{ display:none; }
.mnav{ display:none; }
@media (max-width: 900px){
  :root{ --r-img: 44px; }
  .nav-links{ display:none; }
  .nav{ padding:16px var(--pad); position:relative; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center; width:44px; height:44px;
    border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); cursor:pointer;
  }
  .nav-toggle .i-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .i-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .i-close{ display:block; }
  .mnav{
    position:absolute; left:0; right:0; top:100%; z-index:50;
    display:flex; flex-direction:column; background:#fff; border-top:1px solid var(--line);
    border-bottom:1px solid var(--line); padding:10px var(--pad) 18px;
    box-shadow:0 18px 40px rgba(22,32,46,.12);
  }
  .mnav[hidden]{ display:none; }
  .mnav-h{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); margin:14px 0 4px; }
  .mnav a{ display:block; padding:11px 0; font-size:16px; font-weight:600; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--line); }
  .mnav a:last-of-type{ border-bottom:0; }
  .mnav-call{ display:flex !important; align-items:center; gap:10px; color:var(--blue) !important; }
  .mnav-call svg{ color:var(--blue); }
}
@media (max-width: 620px){
  :root{ --r-img: 32px; }
  .nav-right .btn{ display:none; }
  .cta-row .btn{ width:100%; }
  .logo-sub{ display:none; }
  /* the lockup and the phone are the only two things in the bar at this width,
     so both have to shrink or the bar pushes the document sideways */
  .logo{ gap:9px; }
  img.logo-mark{ height:38px; }
  .logo-name{ font-size:15.5px; }
  .nav-phone{ font-size:14px; }
  .nav{ gap:12px; }
}
@media (max-width: 400px){
  img.logo-mark{ height:33px; }
  .logo-name{ font-size:14px; }
  .nav-phone{ font-size:13px; }
}