/* Kentonite — shared styles (Direction A / Refined Petrol) */

* { box-sizing: border-box; }

:root {
  --petrol: #185976;
  --petrol-deep: #113e53;
  --ink: #12242a;
  --body-text: #42545a;
  --muted: #5b6b6e;
  --paper: #ffffff;
  --mist: #f4f6f6;
  --line: #e2e6e6;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* the hero mockup is deliberately oversized/bled past its circular
     backdrop for effect (see .hero-visual .device) — this keeps that
     intentional bleed from ever creating a page-wide horizontal
     scrollbar on narrow viewports, with no change to how it looks
     within the viewport itself */
  overflow-x: hidden;
}

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

.serif { font-family: 'Newsreader', Georgia, serif; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 16px;
}

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

/*
  ONE alignment system for the whole site: every section is full-bleed
  (background only), and everything it contains sits inside a `.wrap`
  div. `.wrap` is the only thing that ever sets a left/right edge, so
  every section's content starts at exactly the same point, at every
  viewport width. Sections should never set their own horizontal
  padding or max-width — only `.wrap` does.
*/
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* ---------- Header ---------- */

/* masthead height and logo width scale smoothly with the viewport
   (clamp: never below the mobile figure, never above the desktop one)
   instead of jumping at fixed breakpoints */
.site-header, .cs-back { height: clamp(72px, 10vw, 120px); background: var(--petrol); display: flex; align-items: center; }
.site-header .wrap, .cs-back .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.site-header .logo, .cs-back .logo { display: flex; align-items: center; }
.site-header .logo img, .cs-back .logo img { width: clamp(140px, 18vw, 220px); height: auto; display: block; }

.site-header nav, .cs-back nav { display: flex; align-items: center; gap: 40px; }
.site-header nav a, .cs-back nav a { color: #dbe6e8; font-size: 14px; font-weight: 500; }
.site-header nav a:hover, .cs-back nav a:hover { color: #ffffff; }
.site-header nav a.cta, .cs-back nav a.cta {
  color: #ffffff; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 18px; border-radius: 6px;
}

/* ---------- Hero ---------- */

.hero { padding: 80px 0 88px; }
.hero .wrap { display: flex; align-items: center; gap: 64px; }

.hero-copy { flex: 1 1 0; }
.hero-copy h1 {
  font-size: 52px; line-height: 1.14; font-weight: 500;
  margin: 0 0 28px; color: var(--ink); max-width: 620px;
}
.hero-copy p.lede {
  font-size: 17px; line-height: 1.7; color: var(--body-text);
  max-width: 560px; margin: 0 0 32px;
}
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.btn-primary {
  background: var(--petrol); color: #ffffff; font-size: 14px; font-weight: 600;
  padding: 14px 26px; border-radius: 6px; display: inline-block;
}
.btn-primary:hover { background: var(--petrol-deep); color: #fff; }

.ext-link { display: inline-flex; align-items: center; gap: 6px; }
.icon-external { flex: 0 0 auto; }
.novels-text-short { display: none; }

.hero-visual { flex: 0 0 460px; height: 460px; position: relative; overflow: visible; }
.hero-visual .backdrop {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eef3f2 0%, #f6f8f7 55%, #ffffff 78%);
}
.hero-visual .device {
  position: absolute; left: 54%; top: 52%;
  transform: translate(-50%, -50%) translate(-18.5px, 25.4px);
  width: 192.5%; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 40px 60px rgba(18,36,42,0.32));
}
.hero-visual .device img { width: 100%; height: auto; display: block; }

/* ---------- 360 leadership ---------- */

.leadership { padding: 88px 0; background: var(--mist); }
.leadership .intro { max-width: 760px; margin: 0 0 56px; }
.leadership h2 { font-size: 30px; font-weight: 500; margin: 0 0 18px; color: var(--ink); }
.leadership .intro p { font-size: 16px; line-height: 1.75; color: var(--body-text); margin: 0; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.pillar { background: #ffffff; border-radius: 16px; padding: 28px 28px 32px; }
.pillar .label { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--petrol); margin-bottom: 18px; min-height: 34px; }
.pillar .pillar-img {
  aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 20px;
}
.pillar .pillar-img img { width: 100%; height: 100%; object-fit: contain; }
.pillar p { font-size: 15px; line-height: 1.7; color: #4c5c60; margin: 0; }

/* ---------- Client logos ---------- */

.clients { padding: 80px 0; }
.clients .intro { max-width: 860px; margin: 0 0 44px; }
.clients .intro p { font-size: 16px; line-height: 1.75; color: var(--body-text); margin: 0; }
.logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.logo-grid div {
  padding: 26px 20px; display: flex; align-items: center; justify-content: center; height: 84px;
  border-right: 2px dotted rgba(18,36,42,0.22); border-bottom: 2px dotted rgba(18,36,42,0.22);
}
.logo-grid div:nth-child(5n) { border-right: none; }
.logo-grid div:nth-last-child(-n+5) { border-bottom: none; }
.logo-grid img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }

/* ---------- Case study teasers ---------- */

.work { padding: 80px 0 96px; background: var(--mist); }
.work .intro { max-width: 780px; margin: 0 0 44px; }
.work .intro p { font-size: 16px; line-height: 1.75; color: var(--body-text); margin: 0; }
.work-row { display: flex; align-items: center; gap: 68px; }
.work-row-wrap { margin-bottom: 84px; }
.work-row-wrap:last-child { margin-bottom: 50px; }
.work-row.reverse { flex-direction: row-reverse; }
.work-thumb { flex: 0 0 420px; }
.work-thumb img { width: 100%; height: auto; display: block; transition: opacity 0.15s ease; }
.work-thumb a { display: block; }
.work-thumb a:hover img { opacity: 0.92; }
/* text-first rows: the transparent cutouts have varying left-edge padding
   baked in, which reads as a wider text-to-image gap than the image-first
   rows get — nudge the image left to visually even it out */
.work-row.reverse .work-thumb img { margin-left: -50px; }
.work-copy { flex: 1 1 0; }
.work-copy h3 { font-size: 25px; font-weight: 500; margin: 0 0 12px; color: var(--ink); }
/* the heading is now a link (to the case study) — `font: inherit` pulls
   it back to the h3's own 25px serif styling, overriding the smaller
   14px/600 that `.work-copy a` below would otherwise apply, since that
   rule matches every link inside .work-copy including this one */
.work-copy h3 a { font: inherit; color: var(--petrol); }
.work-copy h3 a:hover { color: var(--petrol-deep); }
.work-copy p { font-size: 15px; line-height: 1.7; color: #4c5c60; margin: 0 0 11px; max-width: 560px; }
/* the stat/highlight line is not a link — kept the same copy colour as
   the paragraph above it, just bold, so it doesn't read as clickable */
.work-copy .stat { font-size: 14px; font-weight: 700; color: #4c5c60; margin-bottom: 21px; }
/* the direct-child combinator (>) is deliberate here — it targets only the
   standalone "Read the case study" link, not the one now nested inside h3 */
.work-copy > a { font-size: 14px; font-weight: 600; }

/* ---------- Footer ---------- */

/* top-aligned 3-column layout (rather than one vertically-centred row) so
   "Kentonite" and the copyright line sit a fixed 30px from the footer's
   top edge, with the Connect-with-me block centred between them */
.site-footer { padding: 30px 0 52px; background: var(--ink); }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; }
.site-footer .logo { justify-self: start; }
.site-footer .logo span { color: #ffffff; font-size: 14px; font-weight: 600; }

.footer-connect { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-connect-title { color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-social { display: flex; align-items: center; gap: 18px; }
.footer-social a { color: #a9b6b8; display: flex; }
.footer-social a:hover { color: #ffffff; }
.footer-social svg { width: 19px; height: 19px; }

.site-footer .copyright { justify-self: end; color: #ffffff; font-size: 12px; text-align: right; }

/* ---------- Case study detail page ---------- */

.cs-title { padding: 80px 0 56px; }
.cs-title .inner { max-width: 760px; }
.cs-title .eyebrow { color: var(--petrol); font-weight: 700; }
.cs-title h1 { font-size: 42px; line-height: 1.16; font-weight: 500; margin: 0 0 20px; color: var(--ink); }
.cs-title .awards, .cs-title .highlight { font-size: 14px; color: var(--muted); margin: 0; }

.cs-visual { padding: 0 0 52px; }
.cs-visual .frame img { width: 100%; height: auto; display: block; }

.cs-grid-section { padding: 0 0 96px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
.cs-grid .eyebrow { color: var(--petrol); font-weight: 700; margin-bottom: 16px; }
.cs-grid p { font-size: 15px; line-height: 1.75; color: #3c4d51; margin: 0 0 16px; }
.cs-grid p.sub-label { font-weight: 700; color: var(--petrol); margin: 0 0 12px; }
.cs-grid ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.8; color: #3c4d51; }
.cs-grid ul li { margin-bottom: 10px; }
.cs-grid ul li::marker { color: var(--petrol); }
.stat-inline { font-weight: 700; color: var(--petrol); }

/* ---------- Case study prev/next pager ---------- */

.cs-pager { border-top: 1px solid var(--line); padding: 33px 0 40px; }
.cs-pager-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "prev all next";
  align-items: start; gap: 24px;
}
/* .cs-pager-link is a two-row column (button, then case-study name), while
   .cs-pager-all is a single line, so grid align-items:center would centre it
   against the whole two-row block rather than against the button row — nudge
   it down to sit level with the button's vertical middle instead */
.cs-pager-all { margin-top: 9px; }
.cs-pager-link { display: flex; flex-direction: column; gap: 13px; }
.cs-pager-link.prev { grid-area: prev; justify-self: start; align-items: flex-start; }
.cs-pager-link.next { grid-area: next; justify-self: end; align-items: flex-end; text-align: right; }
.cs-pager-link.prev .cs-pager-name { margin-left: 5px; }
.cs-pager-link.next .cs-pager-name { margin-right: 5px; }
.cs-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--petrol);
  border: 1px solid var(--petrol); border-radius: 6px;
  padding: 9px 18px;
  /* "Prev" and "Next" are both 4 letters, but a fixed min-width makes them
     reliably equal width regardless of letterform metrics */
  min-width: 84px;
}
.cs-pager-name { font-size: 17px; color: var(--ink); }
.cs-pager-link:hover .cs-pager-btn { background: var(--petrol); color: #ffffff; }
.cs-pager-link:hover .cs-pager-name { color: var(--petrol); }
.cs-pager-all { grid-area: all; justify-self: center; font-size: 13px; font-weight: 600; color: var(--petrol); white-space: nowrap; }

/* ---------- Gate / landing page ---------- */

.gate { padding: 120px 0 140px; }
.gate-inner { max-width: 620px; }
.gate h1 { font-size: 46px; line-height: 1.16; font-weight: 500; margin: 0 0 20px; color: var(--ink); }
.gate .lede { font-size: 17px; line-height: 1.7; color: var(--body-text); margin: 0 0 36px; }
.gate-form { display: flex; gap: 12px; margin-bottom: 20px; }
.gate-form input[type="password"] {
  flex: 1 1 240px; font-size: 15px; font-family: inherit; color: var(--ink);
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff;
}
.gate-form input[type="password"]:focus { outline: none; border-color: var(--petrol); }
.gate-form .btn-primary { border: none; cursor: pointer; font-family: inherit; font-size: 14px; flex: 0 0 auto; }
.gate-error { color: #b3261e; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.gate-alt { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .wrap { padding-left: 24px; padding-right: 24px; }

  /* tighten the space above each section's eyebrow by 10px on mobile —
     top padding only, bottom padding is untouched */
  .hero { padding-top: 70px; }
  .leadership { padding-top: 78px; }
  .clients { padding-top: 70px; }
  .work { padding-top: 70px; }
  .cs-title { padding-top: 70px; }

  /* manual desktop line-breaks in case-study headlines shouldn't force
     an extra line once mobile's own narrower wrap already breaks earlier */
  .cs-title h1 br.force-break { display: none; }

  .hero .wrap { flex-direction: column; align-items: flex-start; }
  /* match the bottom breathing room to the sections that follow (leadership's
     88px, same as hero's own desktop bottom padding) rather than the old,
     noticeably tighter 56px */
  .hero { padding-bottom: 88px; }
  .hero .wrap { gap: 28px; }
  .hero-copy h1 { font-size: 36px; }

  /* reorder to eyebrow, headline, image, copy, buttons — `display: contents`
     unwraps .hero-copy so its children become flex items of .hero .wrap
     directly, alongside .hero-visual, so all five can be reordered as
     one group regardless of how they're nested in the markup.
     .hero .wrap's `gap: 28px` now provides ALL of the spacing between
     these five items, so each item's own margin-bottom is zeroed out here
     to avoid stacking on top of the gap and producing uneven spacing. */
  .hero-copy { display: contents; }
  /* eyebrow-to-headline spacing should match the case study pages' 16px
     (the sitewide .eyebrow margin-bottom), not the 28px flex gap used
     between the rest of the hero's stacked elements — so pull it in by
     the difference (28 - 16 = 12px) via a negative margin */
  .hero-copy .eyebrow { order: 1; margin-bottom: -12px; }
  .hero-copy h1 { order: 2; margin-bottom: 0; }
  .hero-visual { order: 3; }
  .hero-copy p.lede { order: 4; margin-bottom: 0; }
  .hero-copy .hero-actions { order: 5; }

  .hero-actions { gap: 14px; flex-wrap: nowrap; }
  .hero-actions .btn-primary { padding: 14px 16px; font-size: 13px; white-space: nowrap; }
  .hero-actions .ext-link { font-size: 13px; }
  .novels-text-full { display: none; }
  .novels-text-short { display: inline; }

  .gate { padding: 64px 0 80px; }
  .gate h1 { font-size: 32px; }
  .gate-form { flex-direction: column; align-items: center; }
  .gate-form input[type="password"] { flex: 0 0 auto; width: 90%; }
  /* right-align the button under the field — align-self overrides the
     container's align-items:center just for this one item, then
     margin-right pulls it in from the container's edge by the same 5%
     the 90%-wide, centred field is inset by, so their right edges match */
  .gate-form .btn-primary { width: auto; align-self: flex-end; margin-right: 5%; }
  .hero-visual { flex-basis: auto; width: 100%; max-width: 340px; height: 340px; }
  .hero-visual .device { width: 158.7%; left: 52%; top: 52%; }

  .pillars { grid-template-columns: 1fr; gap: 24px; }

  .logo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .logo-grid div { border-right: 2px dotted rgba(18,36,42,0.22); border-bottom: 2px dotted rgba(18,36,42,0.22); }
  .logo-grid div:nth-child(5n) { border-right: 2px dotted rgba(18,36,42,0.22); }
  .logo-grid div:nth-last-child(-n+5) { border-bottom: 2px dotted rgba(18,36,42,0.22); }
  .logo-grid div:nth-child(2n) { border-right: none; }
  .logo-grid div:nth-last-child(-n+2) { border-bottom: none; }

  /* align-items: flex-start overrides the desktop row's align-items:center —
     without it, every item below (once display:contents flattens .work-copy)
     would shrink-to-fit and centre horizontally instead of sitting flush left,
     same issue the hero eyebrow had */
  .work-row, .work-row.reverse { flex-direction: column; align-items: flex-start; gap: 0; }
  .work-thumb { flex-basis: auto; width: 100%; margin: 0 0 20px; }
  /* the reverse rows' desktop-only nudge (shifting the thumbnail image left
     to compensate for transparent cutout padding) doesn't apply once the
     image is full-width and stacked on mobile */
  .work-row.reverse .work-thumb img { margin-left: 0; }

  /* reorder each case-study preview to heading, image, copy — the same
     `display: contents` technique as the hero: unwraps .work-copy so its
     children become flex items of .work-row directly, alongside
     .work-thumb, so all four can be reordered as one group regardless of
     how they're nested in the markup */
  .work-copy { display: contents; }
  .work-copy h3 { order: 1; margin-bottom: 16px; }
  .work-thumb { order: 2; }
  .work-copy p { order: 3; }
  .work-copy .stat { order: 4; }
  .work-copy > a { order: 5; }

  .cs-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-title h1 { font-size: 32px; }

  /* same single-row layout as desktop — prev/next left and right, "All
     work" centred between them and middle-aligned with the buttons —
     just tightened up so it fits narrower widths */
  .cs-pager-inner { gap: 12px; }
  .cs-pager-btn { padding: 8px 12px; min-width: 68px; font-size: 11.5px; }
  .cs-pager-name { font-size: 14px; }
  .cs-pager-all { font-size: 12px; }

  .site-footer .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 28px; }
  .site-footer .logo { justify-self: center; }
  .site-footer .copyright { justify-self: center; text-align: center; }

  /* header height and logo width already scale continuously via clamp() —
     just drop the Work/Leadership links below the wordmark's own nav
     width so the masthead never needs to wrap onto a second row */
  .site-header nav, .cs-back nav { gap: 14px; }
  .site-header nav a:not(.cta), .cs-back nav a:not(.cta) { display: none; }
  .site-header nav a.cta, .cs-back nav a.cta { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 480px) {
  .hero-copy h1 { font-size: 30px; }
}