/* ============================================
   ALVEX STUDIO — Bespoke Systems Page
   Loads after css/main.css, which supplies the .browser frame.
   ============================================ */

/* --- Hero (mirrors .tpl-hero so /bespoke-systems sits beside /templates) --- */
.sys-hero {
  padding: 160px 48px 80px;
  background: var(--dark);
}
.sys-hero h1 {
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -.05em;
  line-height: .92;
  margin-bottom: 20px;
}
.sys-hero .sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(240,237,230,.5);
  max-width: 560px;
  line-height: 1.7;
}
.sys-hero-actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sys-hero-actions .btn-main {
  font-size: 14px;
  padding: 16px 28px;
}

/* --- Positioning paragraph ---
   Ruled off top and bottom the same way .marquee-wrap is in main.css, because
   --mid sits close to the --dark hero above it. */
.sys-intro {
  background: var(--mid);
  padding: 88px 48px;
  border-top: 1px solid rgba(240,237,230,.06);
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.sys-intro-inner {
  /* Same 1200px as .sys-overview-grid and .sys-case, so the paragraph shares a
     left edge with the content below it. Centring a 720px block here instead
     started the text at x=360 at 1440, between the hero at 48 and the overview
     grid at 120, and a third left edge in three consecutive sections reads as
     an accident rather than as a choice. */
  max-width: 1200px;
  margin: 0 auto;
}
.sys-intro p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.55);
  /* Measure kept at 720px now that the container is the full content width */
  max-width: 720px;
}
.sys-intro p + p { margin-top: 20px; }

/* --- Overview cards ---
   Three systems at a glance, each anchoring down to its own write-up. One
   screenshot apiece, so the top of the page is a summary rather than the
   first third of the first case study. */
.sys-overview {
  background: var(--navy);
  padding: 80px 48px 24px;
}
.sys-overview-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.sys-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sys-card__shot { margin-bottom: 20px; }
.sys-card__name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--warm-white);
  margin-bottom: 10px;
}
.sys-card__intro {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.5);
  /* Pushes the link to the bottom edge so all three align across the row
     regardless of how long the final intro copy turns out to be. */
  margin-bottom: 16px;
  flex: 1 1 auto;
}
.sys-card__link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--amber);
  border-bottom: 1px solid rgba(200,151,58,.35);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.sys-card__link:hover {
  color: var(--warm-white);
  border-bottom-color: rgba(240,237,230,.5);
}

/* Smaller chrome for the card frames. .browser stays in main.css; this is a
   modifier, because at roughly a third of the page width the full-size
   32px bar and 10px dots read as a title bar rather than as a hint. */
.browser--sm .browser__bar { height: 26px; padding: 0 10px; gap: 5px; }
.browser--sm .browser__bar > span { width: 8px; height: 8px; }
.browser--sm .browser__url { font-size: 10px; margin: 0 8px 0 4px; padding: 2px 10px; }

/* --- Case studies --- */
.sys-cases {
  background: var(--navy);
  padding: 40px 48px 24px;
}
.sys-case {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 0;
  border-top: 1px solid rgba(240,237,230,.08);
  /* Clears the fixed nav when an overview card jumps to its write-up */
  scroll-margin-top: 90px;
}

/* The heading sits on a reading measure while the screenshot row runs the full
   width of the section, which is what stops the images from being one
   enormous frame per screenful. */
.sys-case__head {
  max-width: 720px;
  margin-bottom: 40px;
}

/* --- Two-column write-up ---
   Both columns keep the 36em measure the single column had. Running all four
   blocks down the left of a 1200px section left everything past x=660 empty
   and made each write-up twice as tall as it needed to be. The body is
   uncapped so the stat row beneath can span the section; the reading measure
   is held by .sys-case__body p rather than by this container. */
.sys-case__body { max-width: none; }
.sys-case__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* A 72px gutter leaves a 564px column, which still clears the 540px measure,
     so the two columns are held apart by white space and need no rule. */
  gap: 0 72px;
  /* Two independent stacks, not four cells in rows. Aligning problem against
     stack and built against hardest part would pad the shorter of each pair
     out to the taller, giving back the height this is meant to save. */
  align-items: start;
}
.sys-case__col { min-width: 0; }

/* --- Screenshots ---
   .browser comes from main.css. Two deliberate departures from how
   /templates uses it, below. */
.sys-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
/* Sized so two or one shot stay in the same size band as a row of three,
   rather than growing to fill the section on their own. */
.sys-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.sys-shots--1 { grid-template-columns: minmax(0, 1fr); max-width: 440px; }

.sys-shot { margin: 0; }

/* 1. Rounded on all four corners. On /templates the frame sits above a meta
      block, so only the top is rounded. Here it is a free-standing tile in a
      grid, and a square bottom edge on one reads as a rendering fault. */
.sys-shot .browser { border-radius: 8px; }

/* 2. Whole-image, not cropped to the top. Every file is exactly 1440x900, so
      contain and cover agree, but contain is the honest declaration: nothing
      on these shots is being cropped out of view. */
.sys-shot .browser__screen img { object-fit: contain; }

/* --- Case study text --- */
.sys-case__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,237,230,.35);
  margin-bottom: 14px;
}
.sys-case__head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--warm-white);
}
.sys-block { margin-bottom: 32px; }
.sys-sub {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.sys-case__body p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.55);
  max-width: 36em;
}
.sys-case__body p + p { margin-top: 16px; }

.sys-tech {
  font-size: 13px !important;
  color: rgba(240,237,230,.35) !important;
}
.sys-tech em {
  font-style: normal;
  font-weight: 500;
  color: rgba(240,237,230,.5);
}
.sys-tech code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  /* Long identifiers must be allowed to break rather than push the column */
  word-break: break-word;
}

/* --- Countable facts ---
   Number first visually, label underneath, but the label is the <dt> and
   stays first in the DOM so a screen reader hears "user roles, seven". */
.sys-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 4px 20px;
  margin: 0 0 32px;
}
.sys-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(240,237,230,.12);
  min-width: 0;
}
.sys-stat dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--amber);
  /* Greater Manchester is the longest label on the page. It is allowed to
     wrap onto a second line rather than being clipped or shrunk. */
  overflow-wrap: break-word;
}
.sys-stat dd {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--warm-white);
  margin: 0 0 8px;
}
.sys-stats-note {
  font-size: 13px !important;
  color: rgba(240,237,230,.35) !important;
  margin: -18px 0 32px !important;
}

/* --- Status line, and the one outbound link --- */
.sys-case__link { margin-bottom: 20px; }
.sys-case__link .btn-main {
  font-size: 14px;
  padding: 16px 28px;
}
.sys-status {
  padding-top: 20px;
  border-top: 1px solid rgba(240,237,230,.08);
  font-size: 13px !important;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240,237,230,.35) !important;
}

/* --- Capability --- */
.sys-capability {
  background: var(--mid);
  padding: 100px 48px;
  border-top: 1px solid rgba(240,237,230,.06);
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.sys-capability-inner {
  /* 1200px to share the left edge with .sys-intro-inner, .sys-overview-grid
     and .sys-case. The card grid below keeps its old 1100px track widths so
     the extra 100px moves the block left rather than widening the card text. */
  max-width: 1200px;
  margin: 0 auto;
}
.sys-capability h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.sys-capability-intro {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.55);
  max-width: 640px;
  margin-bottom: 56px;
}
.sys-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 48px;
  /* Held at the container's previous width so the columns are the same size
     they were before the section moved left. */
  max-width: 1100px;
}
.sys-cap {
  padding-top: 24px;
  border-top: 1px solid rgba(240,237,230,.12);
}
.sys-cap h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--warm-white);
  margin-bottom: 12px;
}
.sys-cap p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.5);
}

/* Extends .label from main.css rather than restating the amber treatment.
   .label centres its leading rule; a proof line can run to two lines, so the
   rule is pinned to the first one. */
.sys-proof {
  margin: 16px 0 0;
  align-items: flex-start;
  line-height: 1.7;
}
.sys-proof::before {
  flex: 0 0 24px;
  margin-top: 8px;
}

.sys-capability-close {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(240,237,230,.12);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.55);
  max-width: 640px;
}

/* --- Pricing ---
   No Service or Offer JSON-LD sits behind this block. From £2,500 is a floor
   for an undefined scope, and flat price markup would state it as a fixed
   price for a defined deliverable, which is what /services legitimately has
   and this does not. */
.sys-pricing {
  background: var(--dark);
  padding: 100px 48px;
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.sys-pricing-inner {
  /* Same 1200px as the sections above and below it; .sys-price-grid keeps the
     old 1100px so only the left edge moves. */
  max-width: 1200px;
  margin: 0 auto;
}
.sys-pricing h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.sys-price {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 20px;
}
.sys-price-stand {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--warm-white);
  max-width: 560px;
  margin-bottom: 56px;
}
.sys-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 48px;
  /* As .sys-caps: previous container width, so the blocks do not stretch. */
  max-width: 1100px;
}
.sys-price-block {
  padding-top: 24px;
  border-top: 1px solid rgba(240,237,230,.12);
}
.sys-price-block h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--warm-white);
  margin-bottom: 12px;
}
.sys-price-block p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.5);
}
.sys-price-compare {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(240,237,230,.12);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.35);
  max-width: 640px;
}

/* --- FAQ ---
   Same shape as .tpl-faq. The answers here run considerably longer, up to
   97 words, so the measure is held at 720px and the items have room to grow
   rather than being sized to a fixed height. */
.sys-faq {
  padding: 100px 48px;
  background: var(--dark);
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.sys-faq-inner {
  /* Was a centred 720px block, which started the questions at x=360 at 1440
     while everything above them started at 120. Same treatment as
     .sys-intro-inner: the container takes the 1200px content width and the
     720px measure moves down onto the heading and the items, so the answers
     wrap exactly where they did before. */
  max-width: 1200px;
  margin: 0 auto;
}
.sys-faq h2 {
  max-width: 720px;
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 48px;
}
.sys-faq-item {
  padding: 28px 0;
  border-top: 1px solid rgba(240,237,230,.08);
  /* Carries the measure, and keeps the rules the same length they were */
  max-width: 720px;
}
.sys-faq-item:last-child { border-bottom: 1px solid rgba(240,237,230,.08); }
.sys-faq-item h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--warm-white);
  margin-bottom: 10px;
}
.sys-faq-item p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.5);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .sys-hero { padding: 140px 24px 60px; }
  .sys-intro { padding: 72px 24px; }
  .sys-overview { padding: 64px 24px 16px; }
  .sys-cases { padding: 32px 24px 16px; }
  .sys-case { padding: 56px 0; }
  .sys-capability { padding: 80px 24px; }
  .sys-pricing { padding: 80px 24px; }
  .sys-faq { padding: 80px 24px; }
  .sys-caps, .sys-price-grid { gap: 36px 36px; }
  /* The section is 976px wide here, so the gutter comes in to keep each
     write-up column above 460px. */
  .sys-case__cols { gap: 0 48px; }
  /* Holds three columns down to the collapse point below: at 1024 this is a
     306px card, at the 961px floor it is still 286px. */
  .sys-overview-grid { gap: 28px; }
  .sys-shots { gap: 16px; }
}

/* Three columns to one. Measured, not habitual: a 1200px-capped grid at
   28px gaps drops its card text under 280px once the viewport goes below
   ~952px, so the switch is made just above that. */
@media (max-width: 960px) {
  .sys-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    gap: 44px;
  }
  /* Two across still reads as a group at this width; one enormous frame per
     row is the thing being fixed. */
  .sys-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-shots--2 { max-width: none; }
  .sys-shots--1 { max-width: 380px; }
  .sys-case__head { margin-bottom: 32px; }
}

/* Two columns of prose to one. Below this a 48px gutter leaves each column
   under 400px, which is too narrow to hold a 36em measure. Source order is
   problem, built, stack, hardest part, so the collapsed order is the same as
   reading the two columns down and then across. */
@media (max-width: 900px) {
  .sys-case__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

@media (max-width: 768px) {
  .sys-hero { padding: 120px 20px 48px; }
  .sys-intro { padding: 56px 20px; }
  .sys-overview { padding: 52px 20px 8px; }
  .sys-cases { padding: 24px 20px 8px; }
  .sys-case { padding: 48px 0; }
  .sys-capability { padding: 64px 20px; }
  .sys-pricing { padding: 64px 20px; }
  .sys-faq { padding: 64px 20px; }
  .sys-hero-actions { gap: 20px; }
  .sys-intro p, .sys-capability-intro, .sys-capability-close { font-size: 15px; }
  .sys-price-stand { font-size: 16px; }
  .sys-capability-close, .sys-price-compare { margin-top: 40px; }
  .sys-shots { margin-bottom: 36px; }
}

@media (max-width: 480px) {
  /* Two tiles a row at phone width. Greater Manchester wraps to two lines
     here and is the reason the tracking eases off. */
  .sys-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }
  .sys-stat dt { letter-spacing: .1em; }
  .sys-case__link .btn-main { font-size: 13px; padding: 14px 22px; }
  /* Below this a half-width screenshot is too small to make out anything on
     it, so the row stacks. */
  .sys-shots,
  .sys-shots--2 { grid-template-columns: minmax(0, 1fr); }
  .sys-shots--1 { max-width: none; }
  .sys-overview-grid { gap: 36px; }
}