/* =================================================================
   Arc — revision 3 additions
   Loaded after arc.css. Keep every rule in this file additive.
   ================================================================= */

/* ---------------------------------------------------------- brand logo */
.brand .logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 190px;
}
@media (max-width: 420px) { .brand .logo { height: 22px; } }

/* ------------------------------------------------- proof render strip */
.proof-grid > .strip { grid-column: 1 / -1; }
.strip { border-top: var(--hair) solid var(--rule); padding-top: clamp(20px, 2.6vw, 32px); }
.striplede { margin: 0 0 clamp(14px, 2vw, 22px); }
.striprow {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .striprow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .striprow { grid-template-columns: repeat(3, 1fr); } }
.striprow figure { margin: 0; }
.striprow img { width: 100%; height: auto; display: block; }
.striprow figcaption {
  margin-top: 10px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-70);
}
.stripnote { margin-top: clamp(16px, 2vw, 22px); }

/* ------------------------------------------------ three ways in: dia */
/* the redrawn diagrams carry a little more line work than revision 2,
   so give the poché and the hairlines their own weights */
.dia .poche  { fill: var(--ink); stroke: none; }
.dia .cut    { fill: var(--paper); stroke: none; }
.dia .glass  { stroke: var(--ink); stroke-width: .9; fill: none; }
.dia .fix    { stroke: var(--ink); stroke-width: 1.1; fill: none; stroke-linejoin: round; }
.dia .dash   { stroke: var(--ink); stroke-width: 1; fill: none; stroke-dasharray: 4 3; }
.dia .ghost  { stroke: var(--rule); stroke-width: 1.1; fill: none; }
.dia .mark   { fill: var(--ink); stroke: none; }
.dia .rmlbl  {
  font-family: var(--sans); font-weight: 600; font-size: 9px;
  letter-spacing: .1em; fill: var(--ink); text-anchor: middle;
}
.dia .spine  { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: none; }
svg .mono-lbl.xs { font-size: 10.5px; letter-spacing: .09em; fill: var(--ink-50); }
.dia .rmlbl { font-size: 8.6px; }
.dia .platef { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; }

/* ---- Configurator: internal layouts are customised ------------------
   Sits under the concept plan, where a client is most likely to read the
   drawing as a finished floor plan. Quiet panel, not an alert: this is
   reassurance, not a warning. Additive to arc.css. */
.cfg-custom-note{
  margin: 18px 0 0;
  padding: 16px 18px 15px;
  background: var(--paper-2, #f4f1ea);
  border-left: 2px solid var(--ink, #1d1d1b);
}
.cfg-custom-note p{
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70, #4a4a46);
  max-width: 62ch;
}
.cfg-custom-note p:last-child{ margin-bottom: 0; }
.cfg-custom-note .ccn-h{
  font-weight: 600;
  color: var(--ink, #1d1d1b);
  font-size: 15px;
}
@media (max-width: 560px){
  .cfg-custom-note{ padding: 14px 15px 13px; }
  .cfg-custom-note p{ font-size: 13.5px; }
  .cfg-custom-note .ccn-h{ font-size: 14.5px; }
}

/* ---------------------------------------------------------------- hero what
   The H1 states the category and the pathway count; this line states the
   building types, which the H1 alone leaves abstract. Sits between the H1
   and .sub, so it is deliberately sized between --t-hero and --t-lg and
   set in full ink to read as a second headline rather than body copy. */
.hero .hero-what {
  margin-top: 16px;
  font-size: var(--t-xl);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
/* .sub already carries margin-top: 22px, which is the right gap under this. */

/* ---------------------------------------------------------------- call now
   Header call control. Quieter than the Configure CTA on purpose: two solid
   buttons side by side compete, and Configure is still the primary path.
   Below 560px the number is dropped and this becomes an icon-only tap
   target, since the header row at that width already carries the logo, the
   Configure button and the burger. Re-measure the row if either is relabelled. */
.btn-call {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: var(--hair) solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-sm);
  /* line-height 1 and a block icon: without both, the inline SVG's baseline
     gap made this control 40.1px tall beside a 35px Configure button. */
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s, background .18s;
}
.btn-call:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.btn-call .ph { display: block; width: 15px; height: 15px; flex: 0 0 auto; }
.btn-call .call-num { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  /* Icon only. Keep a square-ish 40px tap target rather than letting the
     padding collapse around a 15px icon. */
  .btn-call { padding: 0; width: 40px; height: 38px; justify-content: center; }
  .btn-call .call-num { display: none; }
}

/* Narrow phones: the header row is logo + call + Configure + burger, which
   does not fit a 360px viewport at the default sizing. Recover the width from
   the gap, the logo and the CTA padding rather than dropping a control — the
   call button and Configure are both conversion paths and neither should
   vanish on a phone. Gutter is left alone so the logo stays aligned with the
   page content beneath it. */
@media (max-width: 420px) {
  .hdr .wrap { gap: 7px; }
  .brand .logo { height: 19px; }
  .hdr .btn { padding: 9px 10px; }
  .btn-call { width: 38px; }
}

/* 340px and below: even at the tightened sizing the row cannot hold four
   controls. Configure steps out of the header rather than overflowing the
   viewport — it is present in the burger panel, which now carries it
   explicitly. The call button stays, since a phone number is the one control
   that has to survive on the smallest phone. */
@media (max-width: 340px) {
  .hdr .btn { display: none; }
}