/* Carolina Circuit. Built to brand standards v5.0 (consolidates v3 and v4).
   Single theme by intent: bone is the brand's field. All colours explicit.

   v5 alignment, the short version:
   - §06 colour ratio is 52 bone / 30 cobalt / 10 ink / 8 ember. Ink has an
     allocation, because body copy is the largest use of ink on any real page.
   - §06 focus rings are cobalt, not ember. Ember on bone is 2.6:1, below the
     3:1 floor for a non-text indicator. This was the one defect the standard
     named in this file by name, and it is now closed.
   - §07 runs two families, not three. Archivo carries display AND body;
     IBM Plex Sans is gone. Scale: 19 lead / 17 body / 15 small / 11 mono
     label / 14 mono data. Nothing off-scale.
   - §08 spacing is a 14px step. It is NOT the artwork's u, which is 12
     drawing units and appears nowhere in this file. v3 named both of them u.
     Radii are 4 / 7 / 10 and nothing else, so no pill shapes.
   - §08 buttons sit on the 7px step (14/28 and 12.5/26.5), and the secondary
     border is cobalt 60%. At 35% it was about 2:1, under the 3:1 floor for a
     control boundary.
   - §07 puts headings below the display in sentence case on customer-facing
     surfaces. The h1, the mono labels and the wordmark stay capitalised, so
     the identity still reads as itself. This was a local deviation in v1 and
     is now the standard.
   - §09 icons run one stroke weight and drop the ember accent in sets of
     three or more, which is every icon set on this site. The master artwork
     carries an ember point of contact; the flat render is the shipping form. */
:root{
  /* §06 palette */
  --cobalt:#0B2FB4; --deep:#071A66; --ember:#FF6B1A;
  --bone:#F4F2ED; --ink:#0A1020; --white:#fff;
  --ember-hover:#F1600F;
  --hair:rgba(10,16,32,.14);
  --hair-rev:rgba(255,255,255,.22);
  --ink-72:rgba(10,16,32,.74);
  --ink-50:rgba(10,16,32,.52);

  /* §08 spacing. step = 14px. Not the artwork's u. */
  --step:14px;
  --s1:7px;    /* 0.5 step · icon gaps, inline */
  --s2:14px;   /* 1 step   · label to field */
  --s3:28px;   /* 2 step   · card padding */
  --s4:42px;   /* 3 step   · between cards */
  --s5:70px;   /* 5 step   · band padding */
  --s6:112px;  /* 8 step   · major section */

  /* §08 radius. Chosen values, not derived from the mark. */
  --r1:4px;    /* swatches, tags */
  --r2:7px;    /* buttons, inputs */
  --r3:10px;   /* cards, images */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s3)}

/* §07 scale. Two families: Archivo for display and body, Plex Mono for data. */
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;margin:0;text-wrap:balance}
h1{font-weight:900;text-transform:uppercase;font-size:clamp(40px,6.4vw,74px);
   line-height:.95;letter-spacing:-.034em;color:var(--cobalt)}
h2{font-weight:800;font-size:clamp(27px,3.2vw,40px);line-height:1.1;
   letter-spacing:-.024em;color:var(--cobalt)}
h3{font-weight:800;font-size:18px;line-height:1.32;letter-spacing:-.012em;color:var(--cobalt)}
p{margin:0;max-width:62ch}
a{color:var(--cobalt)}
.lead{font-size:19px;line-height:1.60;color:var(--ink-72)}
.small{font-size:15px;line-height:1.58;color:var(--ink-72)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
      letter-spacing:.15em;text-transform:uppercase;color:var(--ink-50);line-height:1}
/* §07 data. Anything a customer might want to check is set in mono, because
   mono reads as measured rather than sold. */
.data{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
      font-size:14px;letter-spacing:.03em;line-height:1.5}

/* §08 band rhythm. Was 5-to-8 steps, which put up to 224px of bone between
   two bands and read as a gap rather than a break. 4-to-6 steps is 112-168px:
   still unmistakably a new section, without the hole. */
.band{padding:clamp(56px,6vw,84px) 0}
/* A band carrying one heading, one line and a row of tags does not need the
   full measure. .tight is 3-to-4.5 steps, for those. */
.band.tight{padding:clamp(42px,4.5vw,63px) 0}
.band + .band{border-top:1px solid var(--hair)}
.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}

/* §08 buttons. Padding is on the 7px step and the secondary's 1.5px border is
   taken out of its padding, so both buttons occupy the same box. Ember is spent
   on one call to action per screen and always carries ink text: white on ember
   is 2.9:1 and never ships. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.008em;padding:14px 28px;border-radius:var(--r2);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.btn-ember{background:var(--ember);color:var(--ink)}
.btn-solid{background:var(--cobalt);color:var(--white)}
.btn-solid:hover{background:var(--deep)}
.btn-ember:hover{background:var(--ember-hover);transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--cobalt);border-color:rgba(11,47,180,.6);
  padding:12.5px 26.5px}
.btn-line:hover{background:var(--cobalt);color:var(--white);border-color:var(--cobalt)}
.btn-sm{padding:10.5px 21px}
.btn-line.btn-sm{padding:9px 19.5px}
/* §06: the focus ring is cobalt. Ember is disqualified at 2.6:1 on bone. */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--cobalt);outline-offset:3px;border-radius:var(--r1)}
.field a:focus-visible,footer a:focus-visible{outline-color:var(--white)}

/* §09 icon system. One stroke weight at 5 units on a 120 grid, round caps and
   joins, one container radius at 12 units, and one ember accent on the point
   of contact. At tile size the accents are a few square pixels each and the
   whole set lands around 0.01% of the surface, so they do not touch the §06
   ratio. Add .flat to render the same drawing single-colour, which is what
   print and dense sets use. */
.ic{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:5;
    stroke-linecap:round;stroke-linejoin:round;color:var(--cobalt);--em:var(--ember)}
.ic.flat{--em:currentColor}
.ic .em{stroke:var(--em)}
.ic .em-dot{fill:var(--em);stroke:none}
.field .ic{color:var(--white)}

/* §13 masthead. 92px tall, so §03 puts State C bare here rather than a
   reduced State A. Dropping the plate buys about 40% more aperture at the
   same footprint. */
.masthead{background:var(--bone);border-bottom:1px solid var(--hair)}
.masthead .wrap{display:flex;align-items:center;gap:var(--s3);min-height:92px}
.lockup{display:flex;align-items:center;gap:var(--s1);text-decoration:none;padding:var(--s2) 0}
.lockup svg{display:block;flex:none}
/* §05 wordmark: Archivo 900, tracking closed to -.022em so it reads as one
   object at distance. Placeholder until the drawn wordmark exists. */
.n1{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;
    letter-spacing:-.022em;font-size:21px;line-height:1;color:var(--cobalt);display:block}
.n2{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--deep);opacity:.72;display:block;margin-top:var(--s1)}
/* The masthead runs the wordmark without the descriptor, because the h1
   underneath already says what we do. §06 still governs the full lockup
   wherever it appears alone (print, vehicle). */
.nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.nav .link{font-size:15px;color:var(--deep);text-decoration:none;font-weight:500}
.nav .link:hover{color:var(--cobalt);text-decoration:underline;text-underline-offset:5px}
.tel{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:14px;
  letter-spacing:.03em;color:var(--ink);text-decoration:none}
@media (max-width:960px){.nav .link{display:none}}
/* §13 draws the masthead at 92px on a desktop row. On a phone the row has to
   carry a 44px mark, a 16-character wordmark, a phone number and a button in
   about 340px of usable width, and at 390px the button was breaking to three
   lines. Both actions move to the dock below, and the masthead keeps the one
   thing that has to be there. */
@media (max-width:720px){
  .masthead .wrap{min-height:68px;gap:var(--s2)}
  .lockup{padding:var(--s1) 0}
  .lockup svg{height:36px;width:36px}
  .n1{font-size:18px}
  .nav .tel,.nav .btn{display:none}
}

/* Mobile action dock. Demand in this trade is phone-led and the masthead
   cannot hold the wordmark, a number and a button at 390px without one of
   them breaking, so below 720px both actions live here instead. §06 allows
   one ember call to action per screen and the hero card already spends it,
   so neither dock button is ember: solid cobalt carries white at 8.9:1. */
.dock{display:none}
@media (max-width:720px){
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--hair);
    box-shadow:0 -8px 24px -14px rgba(7,26,102,.34)}
  .dock .btn{width:100%;padding:13px 8px;font-size:14px}
  .dock .btn-line{padding:11.5px 6.5px}
  /* Clear the dock so it never sits on the last line of the footer. The
     space goes on the footer rather than the body so the ink runs to the
     bottom of the page instead of leaving a bone strip under it. */
  footer{padding-bottom:74px}
}

/* Hero */
.hero{padding:clamp(var(--s4),5.5vw,var(--s5)) 0 clamp(56px,6vw,84px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--s3),5vw,var(--s5));align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.hero-copy .lead{max-width:46ch;margin-top:var(--s1)}
@media (max-width:940px){.hero .wrap{grid-template-columns:1fr}}

/* Service tags. §08 radius is 4 / 7 / 10 and nothing else, so these are tags
   at --r1 rather than pills. Names match the icon set exactly, per §09. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.chip{background:var(--white);border:1px solid var(--hair);border-radius:var(--r1);
  padding:var(--s1) var(--s2);font-size:15px;color:var(--deep);font-weight:500;white-space:nowrap}

/* Booking card. The hero's call to action, kept compact */
.booking{background:var(--white);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  box-shadow:0 1px 2px rgba(10,16,32,.04),0 16px 38px -16px rgba(7,26,102,.22)}
.booking p{font-size:15px;line-height:1.6;color:var(--ink-72);margin-top:var(--s1)}
.booking .btn{width:100%}
.booking .fine{font-size:15px;color:var(--ink-72);text-align:center}

/* Credential strip. §09 sets a 28px floor on icons and says to use a text
   label below it rather than a small-icon variant, so this strip is text. */
.strip{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  padding-top:var(--s2);padding-bottom:var(--s2)}
.strip span{font-size:15px;color:var(--deep);font-weight:500}

/* Service tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--white);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.tile:hover{border-color:rgba(11,47,180,.32);transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(7,26,102,.35)}
.tile p{font-size:15px;line-height:1.6;color:var(--ink-72)}

/* Two-column split + term lists */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(var(--s3),5vw,var(--s5));align-items:start}
/* .mid is for a split whose second column is a short row of tags rather than
   a card: left aligned to the top would hang it off the heading's shoulder. */
.split.mid{align-items:center}
@media (max-width:940px){.split{grid-template-columns:1fr}.split.mid{align-items:start}}
.terms{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.terms > div{padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.terms h3{margin-bottom:var(--s1)}
.terms p{font-size:15px;line-height:1.6;color:var(--ink-72)}

/* §10's journey graphic is not used on either page. It is specified for
   quotes and invoices, where the line-item connector terminates on the total.
   The rules for it live in the standard, not here. */

/* The quote. §08: mono carries the pricing argument, because mono reads as
   measured rather than sold. */
.quote{background:var(--white);border:1px solid var(--hair);border-radius:var(--r3);overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(7,26,102,.28)}
.quote-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--hair)}
/* Single column, the head has about 330px to hold a five-word title and a
   spec label. Side by side both of them wrap; stacked, neither does. */
@media (max-width:560px){.quote-head{flex-direction:column;align-items:flex-start;gap:var(--s1)}}
.quote-head strong{font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-.012em;color:var(--cobalt)}
.quote-rows{padding:0 var(--s3) var(--s2)}
.row{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:baseline;
  padding:var(--s2) 0;border-bottom:1px solid var(--hair);
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:14px;
  letter-spacing:.03em;line-height:1.5;font-variant-numeric:tabular-nums}
.row small{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:400;color:var(--ink-50);margin-top:var(--s1);line-height:1}
/* A subtotal partway down a stack: a stopping point, not the terminal node,
   so it takes no ember rule and keeps its hairline. Cobalt marks it instead. */
.row.sub{color:var(--cobalt)}
/* §15 makes the total the terminal node of the journey, and §17 makes it the
   single ember element on an invoice for exactly that reason. The same
   argument holds here: this card is the pricing promise and the total is
   where it lands. §06 forbids ember as type at 2.6:1 on white and says to
   put the emphasis on a rule adjacent to the type instead, which is also
   what a total rule already is. The row above gives up its hairline so the
   two rules do not stack. */
.quote-rows .row:nth-last-child(2){border-bottom:none}
.row.sum{border-bottom:none;font-size:17px;color:var(--cobalt);
  border-top:2px solid var(--ember);padding-top:var(--s2)}
.quote-foot{padding:var(--s2) var(--s3);border-top:1px solid var(--hair);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-50);line-height:1.4}

/* Cobalt field */
.field{background:var(--cobalt);color:var(--white)}
.field h2,.field h3{color:var(--white)}
.field p{color:rgba(255,255,255,.84)}
/* Mono labels on a cobalt field. Ink at 52% over cobalt is unreadable, and
   the closing band is cobalt without carrying .field, so it is named here
   too. §06: white on cobalt is the pairing that clears. */
.field .mono,.close .mono{color:rgba(255,255,255,.72)}
.field .terms{border-top-color:var(--hair-rev)}
.field .terms > div{border-bottom-color:var(--hair-rev)}
.field .terms p{color:rgba(255,255,255,.82)}
.aside{margin-top:var(--s3);font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);max-width:56ch}

/* Steps. A genuine sequence, so it is numbered. The numbers were ember and
   are not any more: §06 puts ember at 2.6:1 on bone and 3.5:1 on cobalt,
   neither of which clears small text. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s4)}
.step{display:flex;flex-direction:column;gap:var(--s1)}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.15em;color:var(--cobalt);line-height:1}
.step p{font-size:15px;color:var(--ink-72);line-height:1.6}
.field .step p{color:rgba(255,255,255,.82)}
.field .step .num{color:rgba(255,255,255,.72)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:var(--s3)}}

/* Area tags */
.towns{display:flex;flex-wrap:wrap;gap:var(--s1)}
.town{font-size:15px;color:var(--deep);border:1px solid var(--hair);
  border-radius:var(--r1);padding:var(--s1) var(--s2);background:var(--white);font-weight:500}

/* Closing call to action */
.close{background:var(--cobalt);color:var(--white)}
.close .wrap{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.close h2{color:var(--white);max-width:20ch}
.close p{color:rgba(255,255,255,.84);max-width:52ch;margin-top:var(--s2);
  margin-left:auto;margin-right:auto}
/* The closing band was two poles, copy left and action right, which on a
   1120px measure left about 400px of cobalt doing nothing between them. One
   centred column instead: the ember button lands on the page's centre line,
   which is where a closing call to action wants to be anyway. */
.close-act{display:flex;flex-direction:column;gap:var(--s2);
  align-items:center;text-align:center}
/* Mono labels set solid at line-height 1, so a stacked pair needs its own
   gap rather than a <br>. Half a step keeps the two lines reading as one
   block against the 1-step rhythm of .close-act around it. */
.stack{display:flex;flex-direction:column;gap:var(--s1)}
/* No full-width override here on purpose. .close-act is shrink-to-fit inside
   a centred column, and a full-bleed button stacked directly above the
   mobile dock's two buttons reads as three calls to action in a row. */

/* Footer */
footer{background:var(--ink);color:rgba(255,255,255,.72)}
footer .wrap{padding-top:var(--s5);padding-bottom:var(--s4);display:grid;
  grid-template-columns:1.5fr 1fr 1fr;gap:var(--s4)}
footer h3{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:11px;
  letter-spacing:.15em;color:rgba(255,255,255,.46);text-transform:uppercase;line-height:1}
footer a{color:rgba(255,255,255,.8);text-decoration:none;font-size:15px}
footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.fcol{display:flex;flex-direction:column;gap:var(--s2)}
.fcol p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);max-width:38ch}
.legal{border-top:1px solid rgba(255,255,255,.13)}
.legal .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  padding-top:var(--s2);padding-bottom:var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1}
@media (max-width:780px){footer .wrap{grid-template-columns:1fr}}