/*
 * surrealism.css — Amanda Morgan Portfolio: Surrealism Style
 * Standalone dark theme stylesheet. Enqueued on the Surrealism front page template.
 */

@font-face {
  font-family: 'King Basil Lite';
  src: url('assets/fonts/King-Basil-Lite.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ─── Surrealism color vars mapped to Figma semantic tokens ──────────────── */
/* Surface and text vars alias tokens.css semantics so light/dark mode works. */
/* Transparency overlays flip per mode since they sit on top of the surface.  */
:root {
  /* Surfaces — alias semantic tokens */
  --void:     var(--color-surface-page);
  --deep:     var(--color-surface-primary);
  --surface:  var(--color-surface-secondary);
  --surface-2:var(--color-surface-tertiary);

  /* Text — alias semantic tokens */
  --pale:     var(--color-text-primary);
  --ink:      var(--color-text-primary);
  --ink-muted:var(--color-text-secondary);

  /* Accent — alias semantic tokens */
  --accent:     var(--color-accent);
  --accent-dim: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --gold:       var(--color-accent-text);
  --gold-dim:   color-mix(in srgb, var(--color-accent-text) 30%, transparent);
  --glow:       color-mix(in srgb, var(--color-accent) 15%, transparent);

  /* Light-mode transparency overlays (dark tint on light surface) */
  --pale-dim:   rgba(15,11,18,0.6);
  --pale-ghost: rgba(15,11,18,0.08);
  --ink-ghost:  rgba(15,11,18,0.1);

  /* Fonts */
  --mono:  'DM Mono', monospace;
  --serif: 'Instrument Serif', serif;
  --sans:  'Outfit', sans-serif;
}

/* Dark-mode transparency overlays (light tint on dark surface) */
@media (prefers-color-scheme: dark) {
  :root {
    --pale-dim:   rgba(237,232,223,0.6);
    --pale-ghost: rgba(237,232,223,0.08);
    --ink-ghost:  rgba(237,232,223,0.1);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body-size);
  font-weight: 300 !important; /* Outfit Light — overrides TT5 theme.json inline weight */
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient noise grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}


/* ─── SUPPRESS PARENT THEME (Twenty Twenty-Five) HEADER BLOCKS ──────────── */
/* Hide any block-rendered site title, logo, or navigation that Twenty        */
/* Twenty-Five injects outside our PHP template nav.                          */
.wp-site-blocks > header,
.wp-block-template-part[class*="header"],
.site-header,
body > header:not(nav) {
  display: none !important;
}


/* ─── NAV ────────────────────────────────────────────────────────────────── */
nav.am-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  border-bottom: 1px solid var(--ink-ghost);
  background: rgba(255,255,242,0.88);   /* light: surface-page #fffff2 at 88% */
  backdrop-filter: blur(16px);
}
@media (prefers-color-scheme: dark) {
  nav.am-nav {
    background: rgba(0,0,26,0.88);      /* dark: surface-page #00001a at 88% */
  }
}

nav.am-nav .nav-mark {
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

nav.am-nav .nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--ink-ghost);
}
nav.am-nav .nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

nav.am-nav .nav-identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
nav.am-nav .nav-name {
  font-family: 'King Basil Lite', serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--pale) !important;
  line-height: 1.56 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  display: block !important;
  /* Override components.css .nav-mark span circle rule */
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
}
nav.am-nav .nav-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 200 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: block !important;
  /* Override components.css .nav-mark span circle rule */
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Hamburger: visible sm/md (< 1024px), hidden lg+ */
.nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.nav-hamburger:hover { color: var(--pale); }

/* Nav links: hidden sm/md, visible lg+ */
nav.am-nav .nav-links {
  display: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile open state — dropdown below fixed nav */
nav.am-nav .nav-links.is-open {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255,255,242,0.96) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--ink-ghost) !important;
  padding: 8px var(--gutter) 20px !important;
}
@media (prefers-color-scheme: dark) {
  nav.am-nav .nav-links.is-open {
    background: rgba(0,0,26,0.96) !important;
  }
}

nav.am-nav .nav-links a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ink-muted) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: color 0.2s;
  display: block !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--ink-ghost) !important;
}
nav.am-nav .nav-links li:last-child a { border-bottom: none !important; }
nav.am-nav .nav-links a:hover { color: var(--pale) !important; }

/* lg+ (≥ 1024px): show nav links, hide hamburger */
@media (min-width: 1024px) {
  .nav-hamburger { display: none; }
  nav.am-nav .nav-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
  }
  nav.am-nav .nav-links a {
    padding: 0 !important;
    border-bottom: none !important;
  }
}


/* ─── HERO ───────────────────────────────────────────────────────────────── */
/* Figma: nav height 71px + itemSpacing gap 8px = 79px offset below fixed nav */
.page-hero {
  padding-top: 79px;
  position: relative;
  overflow: hidden;
}

/* Hero title: inherits H1 responsive size from base rule; hero-specific layout overrides only */
.page-hero .base-module__title {
  font-size: var(--text-h1-size);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 860px;
  margin-bottom: 24px;
}
.page-hero .base-module__desc {
  max-width: 680px;
  margin-bottom: 24px;
}


/* ─── WORK SECTION ───────────────────────────────────────────────────────── */
.work-section {
  padding: 24px 8px 120px;
}

.work-section-label {
  font-family: var(--text-overline-family);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  line-height: var(--text-overline-leading);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

/* ─── Work grid ──────────────────────────────────────────────────────────── */
/* Horizontal scroll carousel — section provides 8px horizontal padding on both sides */
.work-grid {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.work-grid::-webkit-scrollbar { display: none; }

/* ─── Dot scroll indicator ───────────────────────────────────────────────── */
.work-dots {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 24px;
}

.work-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-info-text);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.work-dot--active {
  background: var(--color-action-primary);
}

/* Card width in scroll context */
.work-grid .base-module {
  flex-shrink: 0;
  width: 300px;
  scroll-snap-align: start;
}

/* Grid span / tall helpers — kept for future grid contexts */
.base-module--span-2 { grid-column: span 2; }
.base-module--span-3 { grid-column: span 3; }
.base-module--tall   { grid-row: span 2; }

/* ─── Work card base ─────────────────────────────────────────────────────── */
/* Matches Figma: Work Card / BaseModule */
.base-module {
  position: relative;
  background: var(--deep);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── Shape (optional) ───────────────────────────────────────────────────── */
/* Matches Figma: Shape component inside each card — toggle with base-module--has-shape */
.base-module__shape {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 48px;
  background: linear-gradient(160deg, var(--color-accent-tertiary) 40%, var(--color-accent-secondary) 70%);
  transform: rotate(18deg);
  bottom: -80px;
  right: -60px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
/* Nudge content above the shape */
.base-module--has-shape .base-module__header,
.base-module--has-shape .base-module__body,
.base-module--has-shape .base-module__actions {
  position: relative;
  z-index: 1;
}

/* ─── Header (optional) ──────────────────────────────────────────────────── */
/* Matches Figma: Header — avatar + identity + close. Toggle with base-module--has-header */
.base-module__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-ghost);
  flex-shrink: 0;
}
.base-module__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--ink-ghost);
}
.base-module__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.base-module__avatar-shape {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(160deg, var(--color-accent-tertiary) 40%, var(--color-accent-secondary) 70%);
  transform: rotate(18deg);
  top: 7px;
  left: -7px;
  z-index: 0;
  pointer-events: none;
}
.base-module__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.base-module__name {
  font-family: 'King Basil Lite', serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
  white-space: nowrap;
}
.base-module__role {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */
/* Figma: Body frame has padding:8px all sides across all variants */
.base-module__body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 8px;
}

/* Content column — always present. Padding lives on Body/Action Row (8px), not here. */
.base-module__content {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Overline — category | label tags above the title */
/* Matches Figma: Overline frame with Typography instances */
.base-module__overline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-small-size, 12px);
  font-weight: 200;
  color: var(--color-tag-text);
  flex-wrap: wrap;
}
.base-module__overline-sep { color: var(--ink-ghost); }

.base-module__title {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.base-module__desc {
  font-size: var(--text-body-size);
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* Divider — optional horizontal rule before skill tags */
.base-module__divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 4px 0;
}

/* Skill / method tags — small pill badges below divider */
.base-module__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.base-module__tag {
  font-size: var(--text-body-small-size, 12px);
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tag-text);
}

/* Metric — large stat shown on Featured cards */
/* Matches Figma: 00% / METRIC LABEL HERE on Work Card/Type=Featured */
.base-module__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 32px;
  flex-shrink: 0;
  text-align: right;
}
.base-module__metric-value {
  font-family: var(--sans);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.base-module__metric-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}

/* Image — optional; position depends on variant */
.base-module__image {
  overflow: hidden;
  flex-shrink: 0;
}
.base-module__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.base-module:hover .base-module__image img { transform: scale(1.03); }

/* ─── Actions row (optional) ─────────────────────────────────────────────── */
/* Matches Figma: Action Row with 3 BTN instances. Omit element to hide row. */
/* Add 1–3 <a class="btn btn-primary|btn-ghost"> inside to match Primary/Secondary/Tertiary */
.base-module__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px;
  border-top: 1px solid var(--ink-ghost);
  position: relative;
  z-index: 1;
}
.base-module__actions .btn-primary,
.base-module__actions .btn-ghost {
  font-size: 11px;
  padding: 8px 16px;
}

/* Feature 1 action row: no top border; 8px top/bottom only (0 left/right — card padding provides sides) */
.base-module--feature-1 .base-module__actions {
  border-top: none;
  padding: 8px 0;
}

/* ─── Variants ───────────────────────────────────────────────────────────── */

/* Default — Figma: Work Card/Default
   Wide text-and-metric card. No image, no header. Body: content left, metric right. */
.base-module--default {
  flex-direction: column;
}
.base-module--default .base-module__body {
  flex-direction: row;
  align-items: center;
}
.base-module--default .base-module__title {
  font-size: var(--text-h1-size);
}

/* Default Right — Figma: BaseModule=Default Right
   Content left, image right, vertically centered. Body gap:16, both columns equal width. */
.base-module--default-right .base-module__body {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 8px;
}
.base-module--default-right .base-module__image {
  flex: 1;
  min-height: 160px;
}
.base-module--default-right .base-module__title {
  font-size: var(--text-h1-size);
}

/* Default Left — Figma: BaseModule=Default Left
   Mirror of Default Right: image left, content right. */
.base-module--default-left .base-module__body {
  flex-direction: row-reverse;
  align-items: center;
  gap: 16px;
  padding: 8px;
}
.base-module--default-left .base-module__image {
  flex: 1;
  min-height: 160px;
}
.base-module--default-left .base-module__title {
  font-size: var(--text-h1-size);
}

/* Feature 1 — Figma: BaseModule=Feature 1
   Card has 8px padding all sides. Body is column with 16px gap. Image top, content + actions below. */

/* Card-level 8px padding, 8px gap between Body and Action Row — matches Figma itemSpacing:8 */
.base-module--feature-1 {
  padding: 8px;
  gap: 8px;
}

/* Overline: text-primary color, uppercase — matches Figma textCase=UPPER + VariableID:17:8 */
.base-module--feature-1 .base-module__overline {
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.base-module--feature-1 .base-module__title {
  font-size: var(--text-h4-size, 20px);
}

.base-module--feature-1 .base-module__divider {
  display: none;
}

/* Body: column layout, 16px gap between image and content, no padding (card handles it) */
.base-module--feature-1 .base-module__body {
  flex-direction: column;
  padding: 0;
  gap: 16px;
}

/* Image container: 193px height per Figma, full width within card padding */
.base-module--feature-1 .base-module__image {
  width: 100%;
  height: 193px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
/* Image itself: wider than container — right side clips at container edge */
.base-module--feature-1 .base-module__image img {
  width: 120%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transform: none;
  padding-top: 16px;
  padding-left: 24px;
}

/* Feature 1 shape: inline SVG mesh gradient matching Figma exactly.
   Figma uses feGaussianBlur stdDeviation=154.1 on each solid-filled sub-shape,
   not a gradient. Two Shape instances at (-246,220) and (0,219) in card space.
   SVG fill attributes reference CSS token variables for light/dark mode support. */
.base-module--feature-1 .base-module__shape {
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  transform: none;
  opacity: 1;
}

.base-module--feature-1 .base-module__shape::before,
.base-module--feature-1 .base-module__shape::after {
  display: none;
}

.base-module--feature-1 .bm-shape-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* List 1 — Figma: BaseModule=List 1
   Tall card, content only (no side image). */
.base-module--list-1 .base-module__body {
  flex-direction: column;
}
.base-module--list-1 .base-module__title {
  font-size: var(--text-h1-size);
}

/* List 2 — Figma: BaseModule=List 2
   Medium-tall, content only, shape positioned top-right. */
.base-module--list-2 .base-module__body {
  flex-direction: column;
}
.base-module--list-2 .base-module__title {
  font-size: var(--text-h1-size);
}
.base-module--list-2 .base-module__shape {
  top: -60px;
  right: -60px;
  bottom: auto;
}


/* ─── CONTACT ────────────────────────────────────────────────────────────── */
.contact-section {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,79,46,0.07) 0%, transparent 60%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(60px);
}
.contact-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.contact-big {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 110px);
  color: var(--pale);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-style: italic;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.contact-sub {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 110px);
  color: var(--accent);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-style: italic;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
.contact-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.contact-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border: 1px solid var(--ink-ghost);
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  border-radius: 100px;
}
.contact-link:hover { border-color: rgba(237,232,223,0.3); color: var(--pale); }
.contact-link.primary { background: var(--pale); border-color: var(--pale); color: var(--void); }
.contact-link.primary:hover { opacity: 0.9; }


/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--ink-ghost);
  padding: 24px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}


/* ─── SHAPE COMPONENT ───────────────────────────────────────────────────── */
/*
 * Reusable Shape: 589×589 rounded square (border-radius 64px) rotated 45°,
 * filled with overlapping navy (#053A86) and dark-teal (#002E36) layers.
 * Used behind the avatar in the nav and as a decorative section background.
 */

/* Nav avatar — circle clips the shape inside it */
nav.am-nav .nav-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
nav.am-nav .nav-avatar {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;  /* clips the shape to the circle */
  z-index: 1;
}
nav.am-nav .nav-avatar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Shape peek — light blue/mint gradient clipped at the bottom-left of the avatar circle.
   Figma: 589×589 rounded rect, cornerRadius 114, rotation 56°, fills #6dc5fd + #b3fff1.
   CSS shape is smaller; the circle overflow:hidden creates the curved clip boundary. */
nav.am-nav .nav-avatar-shape {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--color-accent-tertiary) 40%, var(--color-accent-secondary) 70%);
  transform: rotate(18deg);
  top: 17px;
  left: -18px;
  z-index: 0;
  pointer-events: none;
}

/* Body shape — decorative section between work grid and footer */
.body-shape-section {
  position: relative;
  height: 320px;
  overflow: hidden;
  margin-top: -60px; /* pull up to overlap with work section bottom */
  pointer-events: none;
}
.body-shape {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 64px;
  background: linear-gradient(135deg, #053A86 30%, #002E36 70%);
  transform: rotate(45deg);
  /*
   * In Figma: shape center is at x = −419 + 589/2 = −124px in a 600px frame.
   * We mirror that: left edge of bounding box after rotation ≈ −(560/2)×√2 from center.
   * Position so the right tip of the diamond sits at ~30% of viewport width.
   */
  left: calc(20% - 560px);
  top: -60px;
  pointer-events: none;
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* max-width breakpoints mirror the Figma Responsive collection thresholds:
   1023px = below lg (< 1024px), 639px = below md (< 640px / sm) */
@media (max-width: 1023px) {
  nav.am-nav { padding: 16px var(--gutter); }
  .work-section { padding: 24px 8px 80px; }
  .base-module--span-2, .base-module--tall { grid-column: span 2; grid-row: span 1; }
  .base-module--span-3 { grid-column: span 2; }
  footer { padding: 20px var(--gutter); flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 639px) {
  nav.am-nav { padding: 14px var(--gutter); }
  .nav-links { gap: 20px; }
  .work-section { padding: 24px 8px 64px; }
  .base-module--span-2, .base-module--span-3, .base-module--tall { grid-column: span 1; grid-row: span 1; }
  .base-module--default-right .base-module__image,
  .base-module--default-left .base-module__image { width: 40%; }
  .base-module--feature-1 .base-module__image { aspect-ratio: 16/10; }
  .contact-section { padding: 72px var(--gutter); }
  footer { padding: 16px var(--gutter); }
}