@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --weight-regular: 400;
  --weight-medium: 500;

  /* color — base palette */
  --paper-50: #FDFBF7;
  --paper-100: #FBF8F3;
  --paper-200: #F4EFE7;
  --paper-300: #EBE4D9;
  --paper-400: #DCD3C4;
  --paper-500: #C4B9A7;
  --ink-100: #E3E5EE;
  --ink-200: #C2C6D8;
  --ink-300: #8F95B4;
  --ink-400: #6B7191;
  --ink-500: #4A5279;
  --ink-700: #2C3358;
  --ink-900: #1B2143;
  --ink-950: #12162E;
  --black: #0D0D0D;
  --white: #FFFFFF;
  --accent-500: #C25A2B;
  --accent-600: #A9481F;
  --accent-100: #F6E4D9;
  --red-600: #DC2626;
  --red-200: #FECACA;
  --red-50: #FEF2F2;
  --green-600: #16A34A;
  --green-100: #DCFCE7;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-200: #93C5FD;
  --card-sand: #EFE7D9;
  --card-mist: #E3E5EE;
  --card-olive: #DEE2D2;
  --card-rose: #F0DDD5;
  --card-ink: var(--ink-900);

  /* color — semantic roles */
  --bg-page: var(--paper-100);
  --bg-inset: var(--paper-200);
  --bg-sunken: var(--paper-300);
  --bg-elevated: var(--paper-50);
  --bg-inverse: var(--ink-900);
  --text-display: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-inverse: var(--paper-100);
  --text-link: var(--ink-900);
  --text-link-hover: var(--accent-500);
  --border-default: var(--paper-300);
  --border-strong: var(--paper-400);
  --border-inverse: rgba(255, 255, 255, 0.16);
  --border-focus: var(--ink-500);
  --surface-card: var(--card-sand);
  --surface-field: var(--white);
  --surface-overlay: var(--paper-50);
  --surface-hover: var(--paper-200);
  --surface-active: var(--paper-300);
  --surface-muted: var(--paper-200);
  --btn-primary-bg: var(--black);
  --btn-primary-bg-hover: #262626;
  --btn-primary-fg: var(--paper-50);
  --btn-secondary-bg: var(--paper-200);
  --btn-secondary-fg: var(--ink-900);
  --btn-outline-border: var(--paper-400);
  --danger: var(--red-600);
  --danger-fg: var(--white);
  --danger-subtle: var(--red-50);
  --success: var(--green-600);
  --success-subtle: var(--green-100);
  --info: var(--blue-600);
  --chart-1: var(--ink-900);
  --chart-2: var(--ink-500);
  --chart-3: var(--ink-400);
  --chart-4: var(--ink-300);
  --chart-5: var(--ink-200);
  --chart-highlight: var(--accent-500);
  --chart-grid: var(--paper-300);
  --chart-axis: var(--text-secondary);
  --ring: var(--ink-300);
  --ring-danger: var(--red-200);
  --backdrop: rgba(18, 22, 46, 0.45);

  /* type */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 40px;
  --text-5xl: 68px;
  --leading-2xs: 16px;
  --leading-xs: 16px;
  --leading-sm: 20px;
  --leading-base: 26px;
  --leading-lg: 30px;
  --leading-xl: 30px;
  --leading-2xl: 30px;
  --leading-3xl: 34px;
  --leading-4xl: 42px;
  --leading-5xl: 68px;
  --leading-body: 1.65;
  --leading-body-loose: 1.75;
  --leading-tight: 1.05;
  --tracking-display: -0.03em;
  --tracking-heading: -0.018em;
  --tracking-normal: 0;
  --tracking-label: 0.06em;
  --tracking-eyebrow: 0.14em;

  /* spacing */
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;
  --space-hair: 2px;
  --space-half: 6px;
  --control-h-xs: 22px;
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 36px;
  --control-h-xl: 44px;
  --measure-prose: 62ch;
  --page-max: 1120px;
  --page-gutter: var(--space-4);

  /* radius */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-none: none;
  --shadow-hairline: inset 0 0 0 1px var(--border-default);
  --shadow-overlay: 0 10px 15px -3px rgba(18, 22, 46, 0.10), 0 4px 6px -4px rgba(18, 22, 46, 0.10);
  --shadow-overlay-lg: 0 25px 50px -12px rgba(18, 22, 46, 0.18);
  --shadow-tooltip: 0 1px 2px 0 rgba(18, 22, 46, 0.12);
  --shadow-2xs: 0 1px 0 0 rgba(18, 22, 46, 0.05);
  --shadow-xs: 0 1px 2px 0 rgba(18, 22, 46, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(18, 22, 46, 0.10), 0 1px 2px -1px rgba(18, 22, 46, 0.10);
  --shadow-md: 0 4px 6px -1px rgba(18, 22, 46, 0.10), 0 2px 4px -2px rgba(18, 22, 46, 0.10);
  --shadow-lg: 0 10px 15px -3px rgba(18, 22, 46, 0.10), 0 4px 6px -4px rgba(18, 22, 46, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(18, 22, 46, 0.10), 0 8px 10px -6px rgba(18, 22, 46, 0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(18, 22, 46, 0.18);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent);
  --focus-ring-danger: 0 0 0 3px color-mix(in oklab, var(--ring-danger) 65%, transparent);
  --blur-backdrop: 2px;

  /* motion */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-control: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

/* base element defaults */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: var(--page-max);
  padding: max(32px, 20vh) 0 var(--space-9);
  /* on short/narrow mobile viewports 20vh can shrink to nearly nothing
     (e.g. landscape phones), leaving barely any gap below the byline
     pinned at the top — a higher fixed floor guarantees clearance there */
  /* off-center: the first --skew-budget of slack beyond --page-max splits
     8:1 left:right, so the column shifts right by a fixed, bounded amount.
     Any slack past that budget (wide monitors) splits evenly instead, so
     the column stops drifting further right and just gets more breathing
     room on both sides — it never marches toward the right edge. Below
     --page-max both margins collapse to --page-gutter, symmetric. */
  --skew-extra: max(0px, calc(100vw - var(--page-max)));
  --skew-budget: 480px;
  --skew-skewed: clamp(0px, var(--skew-extra), var(--skew-budget));
  --skew-overflow: max(0px, calc(var(--skew-extra) - var(--skew-budget)));
  margin-left: max(var(--page-gutter), calc(var(--skew-skewed) * 8 / 9 + var(--skew-overflow) / 2));
  margin-right: max(var(--page-gutter), calc(var(--skew-skewed) * 1 / 9 + var(--skew-overflow) / 2));
}

@media (max-width: 480px) {
  body { padding-top: max(140px, 20vh); }
}

::selection { background: var(--ink-900); color: var(--paper-100); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-display);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}
h1 {
  font-size: 56px;
  line-height: 56px;
  letter-spacing: var(--tracking-display);
  max-width: var(--measure-prose);
}
h3 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }

/* h2 and h3 are deliberately close in size — color (ink-900 vs ink-700
   body) carries the heading/body distinction, not size. h1 is exempt:
   it's the hero headline, not a repeating heading level. */
h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }

/* h4 stands in for a small category tag under a heading */
h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure-prose);
  text-wrap: pretty;
  color: var(--text-body);
  line-height: var(--leading-body);
}

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: var(--transition-control);
}
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); }

/* the hero CTA (button.btn-primary, wrapped in its own <p> right after
   the h1 subline): a viewport-relative bottom margin, same max() pattern
   as body's padding-top, so on short/mobile viewports the next h2 is
   pushed below the fold instead of crowding right under the button */
h1 ~ p > button.btn-primary { margin-bottom: max(60px, 22.5vh); }

/* name + role: pinned to the true top of the page (positioned against
   body's padding box, so body's own padding-top — which pushes the h1
   block down to vertically center it — doesn't push this along with it);
   same size as the subline just below the h1 */
.byline {
  position: absolute;
  top: var(--space-4);
  left: 0;
  max-width: 100%;
  /* scales down continuously below ~480px viewports (where 4.2vw < 20px)
     so "User Experience & Conversion Design" keeps fitting on one line
     instead of wrapping; line-height stays unitless so it scales with it */
  font-size: clamp(13px, 4.2vw, var(--text-xl));
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-body);
}

/* sections: each h2 opens a new section, separated by page rhythm */
h1 { margin-bottom: var(--space-4); }
h1 + p {
  margin-bottom: var(--space-9);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--text-body);
  max-width: var(--measure-prose);
}
h2 { margin-top: var(--space-10); margin-bottom: var(--space-5); }
h2:first-of-type { margin-top: 0; }

/* offering / client entries: title, category tag, one-sentence description */
h3 { margin-top: var(--space-6); }
h2 + h3 { margin-top: 0; }

/* client cards: flat fill, no shadow, no border — the fill is the edge */
.client-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-4);
  /* overflow-x: auto forces overflow-y to compute as auto too (per spec),
     which clips card hover shadows vertically; padding + a matching
     negative margin gives the shadow room without shifting the layout.
     Horizontal clearance is handled separately below, via spacer
     pseudo-elements, so it doesn't overshoot --page-gutter and get
     clipped by the document edge on narrower viewports. */
  padding-top: 48px;
  padding-bottom: 48px;
  margin-top: calc(var(--space-5) - 48px);
  margin-bottom: -48px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}
.client-grid::-webkit-scrollbar { display: none; } /* Chrome, Safari */
/* the leading spacer (kept on ::after) reserves shadow clearance for the
   last card only; dropping it from ::before, plus pulling the row past
   the page gutter with a negative margin, aligns the first card's left
   edge with the rest of the page content (h1, paragraphs) instead of
   sitting 16px further right, and nudges the row left so a sliver of the
   next card peeks in as a scroll affordance — on every screen size, not
   just mobile */
.client-grid {
  margin-left: calc(-1 * var(--page-gutter));
}
.client-grid::before {
  content: "";
  flex: 0 0 0;
  scroll-snap-align: start;
}
.client-grid::after {
  content: "";
  flex: 0 0 16px;
  scroll-snap-align: start;
}

.client-card {
  border-radius: var(--radius-card);
  transform-origin: center;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.client-card:hover {
  /* scale only on :hover, not :focus-within — focus persists after a
     click/tap, so scaling it there would leave the grow stuck instead
     of reverting */
  transform: scale(1.02);
}
.client-card:hover,
.client-card:focus-within {
  /* a deliberate, transient exception to the house rule that in-flow
     elements never cast a resting shadow */
  box-shadow: var(--shadow-xl);
}
.client-card p { max-width: none; margin-bottom: 0; padding: 0 var(--space-4) var(--space-4); }

/* click-to-reveal body text, no JS: the h3/plus header, the h4 tag, and
   the media (photo) are all inside summary, so a click anywhere on them
   — not just the photo — triggers the native details toggle; the
   paragraph is the details' other child and is native-hidden until [open] */
.client-card summary {
  padding: var(--space-4) var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}
.client-card summary::-webkit-details-marker { display: none; }
.client-card summary::marker { content: ""; display: none; }
.client-card summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.client-card summary + p { margin-top: var(--space-3); }

/* bleeds edge to edge horizontally by cancelling summary's own left/right
   padding; no bottom margin, so the image sits flush at the card's bottom
   edge while closed — spacing before the revealed paragraph comes from
   "summary + p" below instead, which only exists once that text is shown */
.client-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0 calc(-1 * var(--space-4)) 0;
}

/* the client's name and category tag, displayed above the card's photo
   (inside summary, so clicking them also toggles the card), with a
   plus sign next to the name */
.client-card-item {
  display: flex;
  flex-direction: column;
  /* caps at 360px, but shrinks on viewports too narrow to fit that plus
     both gutters — otherwise the first card's right edge would run past
     the viewport before a user ever scrolls. The extra 48px below leaves
     a peek of the next card visible on mobile, instead of sizing
     exactly to the visible width. */
  flex: 0 0 min(360px, calc(100vw - 2 * var(--page-gutter) - 48px));
  scroll-snap-align: start;
}
.client-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.client-card__header h3 { margin: 0; }
.client-card-item h4 { margin-bottom: var(--space-3); }
.client-card__plus {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

/* fills .client-card__media edge to edge — no border, no inset;
   the image carries its own radius now, so .client-card no longer
   needs overflow: hidden and its box-shadow isn't clipped */
.client-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  z-index: 0;
}

/* pairs a section h2 with a right-aligned control on the same line;
   takes over the h2's own vertical rhythm (margin-top/bottom) since
   that's zeroed on the heading itself to avoid it fighting the row's
   flex alignment */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
}
.section-heading-row h2 { margin-top: 0; margin-bottom: 0; }

/* prev/next scroll controls for .client-grid, ported from the design
   system's IconButton (.rds-iconbtn, size sm, variant outline) */
.client-grid__controls {
  display: flex;
  flex: none;
  gap: var(--space-1);
}
.rds-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-display);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-control);
}
.rds-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rds-iconbtn--sm { width: 28px; height: 28px; }
.client-grid__controls .rds-iconbtn--sm { width: 44px; height: 44px; }
.rds-iconbtn--outline { box-shadow: inset 0 0 0 1px var(--btn-outline-border); }
.rds-iconbtn--outline:hover { background: var(--surface-hover); }

/* footer: a hairline above the colophon, set small in mono */
body > p:last-of-type {
  margin-top: var(--space-9);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}