/* Royal Knights Techs: shared chrome for every page (tokens, bar, button, footer).
   Page-specific choreography stays inline in each page. */
:root {
  --sc-canvas:     #EDF3FA;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0B1F3A;
  --sc-ink-soft:   #42577A;
  --sc-accent:     #1662C4;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;

  /* Light canvas: halve the shadow alphas and tint them toward navy. */
  --sc-shadow-color: 214 60% 18%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08), 0 10px 24px -6px hsl(var(--sc-shadow-color) / 0.14);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08), 0 22px 48px -12px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.9);

  /* The logo orange. Reserved for one meaning on this page: a gap in the wall. */
  --rk-gap: #E58A0E;
  --rk-gap-ink: #9A5306;
  --rk-bar-h: 5.4rem;
  --rk-dock: 0px;
  --rk-foot: #0B1F3A;
  /* Honed-stone grain: a tiny tiling noise, drawn by the browser, no image request. */
  --rk-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .12 0 0 0 0 .23 .16 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body { font-feature-settings: "ss01"; }
.sc-display { font-weight: 600; letter-spacing: -0.035em; }
h1, h2, h3 { color: var(--sc-ink); }
.sc-grain { opacity: 0.03; }

/* ---------------------------------------------------------------- bar -- */
/* Skip link: hidden until a keyboard user tabs to it. */
.skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: calc(var(--sc-z-chrome) + 1);
  padding: 0.7rem 1.1rem; border-radius: var(--sc-r-md);
  background: var(--sc-ink); color: var(--sc-canvas); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--rk-bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar__mark { display: block; flex: none; }
.bar__mark img { height: 4.1rem; width: auto; }
.bar__nav { display: flex; gap: var(--sc-5); margin-left: auto; font-size: var(--sc-t-sm); font-weight: 500; }
.bar__nav a { text-decoration: none; color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__nav a:hover { color: var(--sc-ink); }
.bar__tel { font-size: var(--sc-t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__menu { display: none; margin-left: auto; position: relative; }
.bar__menu summary {
  list-style: none; cursor: pointer;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: var(--sc-r-sm); border: 1px solid var(--sc-hairline-strong);
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu summary span, .bar__menu summary span::before, .bar__menu summary span::after {
  display: block; width: 1.1rem; height: 1.5px; background: var(--sc-ink); position: relative; content: "";
}
.bar__menu summary span { transition: background 160ms var(--sc-ease-out); }
.bar__menu summary span::before, .bar__menu summary span::after { transition: top 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.bar__menu summary span::before { position: absolute; top: -6px; }
.bar__menu summary span::after { position: absolute; top: 6px; }
/* Open: the middle line drops out and the outer two cross into an X. */
.bar__menu[open] summary span { background: transparent; }
.bar__menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.bar__menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.bar__menu nav {
  position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 15rem;
  display: grid; padding: var(--sc-2);
  background: var(--sc-surface); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.bar__menu nav a { padding: 0.8rem 1rem; text-decoration: none; border-radius: var(--sc-r-sm); white-space: nowrap; }
.bar__menu nav a:hover { background: var(--sc-canvas); }

/* --------------------------------------------------------- the button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 2.9rem; padding: 0 1.3rem;
  border-radius: var(--sc-r-sm); border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap; text-decoration: none;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.22);
  cursor: pointer;
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--quiet { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn--quiet:hover { background: var(--sc-surface); }
.bar .btn { min-height: 2.6rem; }

/* -------------------------------------------- mobile click-to-call dock -- */
.call-dock { display: none; }
.call-dock svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Google review stars, wherever a rating appears. */
.stars { color: #F2B01E; letter-spacing: 0.08em; font-size: 1.05em; line-height: 1; }

/* ------------------------------------------------------- site footer -- */
.site-foot {
  position: relative; background: var(--rk-foot); color: #B9C7DC;
  padding-block: var(--sc-9) var(--sc-6); font-size: var(--sc-t-sm);
  isolation: isolate;
}
/* The fortress at dusk, keeping watch over the footer. */
.site-foot__sky {
  position: absolute; inset: 0 0 auto 0; z-index: -1; width: 100%; height: clamp(16rem, 36vw, 34rem);
  object-fit: cover; object-position: 72% 30%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.site-foot:has(.site-foot__sky) { padding-top: clamp(12rem, 25vw, 23rem); }
/* Desktop: the fortress is a small lit landmark in the top corner, not a full-width band.
   The sky around it fades out so it floats on the footer navy. */
@media (min-width: 861px) {
  .site-foot__sky {
    width: auto; height: 16rem; left: auto; top: 0.25rem;
    right: calc(max(var(--sc-gutter), (100% - var(--sc-maxw)) / 2 + var(--sc-gutter)) - 5rem);
    -webkit-mask-image: radial-gradient(closest-side at 76% 40%, #000 55%, transparent);
            mask-image: radial-gradient(closest-side at 76% 40%, #000 55%, transparent);
  }
  .site-foot:has(.site-foot__sky) { padding-top: 10rem; }
}
.site-foot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4E9BFF 30%, #4E9BFF 70%, transparent);
}
.site-foot a { color: #E6EEF9; text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.site-foot a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.site-foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sc-8) var(--sc-7); }
.site-foot__brand img { width: min(17rem, 100%); height: auto; }
.site-foot__brand p { margin: var(--sc-5) 0 0; max-width: 44ch; line-height: 1.65; }
.site-foot__rating { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: var(--sc-5); font-weight: 500; }
.site-foot__col { display: flex; flex-direction: column; gap: var(--sc-3); align-items: flex-start; }
.site-foot__h {
  margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF;
}
.site-foot__col small { display: block; font-size: var(--sc-t-xs); color: #93A6C2; }
.site-foot__col a:has(small) { font-variant-numeric: tabular-nums; font-weight: 600; }
.site-foot__col p { margin: var(--sc-2) 0 0; line-height: 1.6; }
.site-foot__base {
  margin-top: var(--sc-9); padding-top: var(--sc-5); border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-xs); color: #93A6C2;
}
.site-foot__base p { margin: 0; }
.site-foot__motto { color: #F5A841; letter-spacing: 0.04em; }
.site-foot__base nav { margin-left: auto; display: flex; gap: var(--sc-5); }


/* ----------------------------------------------------------- mobile ----- */
@media (max-width: 1080px) {
  .bar__nav, .bar__tel { display: none; }
  .bar__menu { display: block; }
  .bar > .btn { display: none; }
}
@media (max-width: 860px) {
  :root { --rk-bar-h: 4.5rem; --rk-dock: calc(4.1rem + env(safe-area-inset-bottom, 0px)); }
  .bar__mark img { height: 3.15rem; }
  body { padding-bottom: var(--rk-dock); }
  .call-dock {
    display: block; position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome);
    padding: 0.55rem var(--sc-gutter) calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--sc-hairline);
  }
  .call-dock .btn { width: 100%; min-height: 3rem; font-size: var(--sc-t-base); font-variant-numeric: tabular-nums; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .site-foot__sky { height: 17rem; object-position: 78% 30%; }
  .site-foot:has(.site-foot__sky) { padding-top: 12rem; }
  .site-foot__brand { grid-column: 1 / -1; }
  .site-foot__base nav { margin-left: 0; }
}
@media (max-width: 480px) {
  .site-foot__grid { grid-template-columns: 1fr; }
}