/* ============================================================
   JC WEBFOLIO — main.css
   ------------------------------------------------------------
   One stylesheet, organized top-down:
     1. Tokens
     2. Base / reset
     3. Typography
     4. Layout primitives (container, section, section head)
     5. Buttons & links
     6. Header & navigation
     7. Mobile menu
     8. Hero
     9. Homepage sections
    10. Shared components (service rows, process, project entries)
    11. Inner pages (work, case study, services, about, contact, legal)
    12. Footer
    13. Forms
    14. Motion & reveal system
    15. Responsive adjustments
   ============================================================ */


/* 1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color */
  --bg:          #FAFAF8;   /* warm white — primary ground        */
  --surface:     #FFFFFF;   /* pure white — cards, form fields    */
  --ink:         #111110;   /* near-black — primary text          */
  --ink-2:       #66655F;   /* warm gray — labels, captions       */
  --ink-sub:     #3E3D38;   /* darker gray — supporting paragraphs */
  --on-dark-sub: #C6C5BD;   /* its equivalent on dark sections     */
  --line:        #E7E7E3;   /* hairline dividers                  */
  --line-soft:   rgba(17, 17, 16, 0.10);
  --blue:        #155EEF;   /* JC Webfolio blue — interactive only  */
  --blue-deep:   #0F4CD1;   /* pressed / hover shift              */
  --dark:        #131311;   /* near-black section ground          */
  --dark-line:   rgba(250, 250, 248, 0.14);
  --on-dark:     #F5F4F0;   /* primary text on dark               */
  --on-dark-2:   #A3A29B;   /* secondary text on dark             */
  --error:       #C0392B;

  /* Type */
  --font-sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono:  "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --font-sub:   "Public Sans", "Segoe UI", Arial, sans-serif;  /* supporting paragraphs */

  --fs-hero:    clamp(3rem, 8vw, 7.5rem);        /* h1, hero            */
  --fs-display: clamp(2.75rem, 6vw, 5.25rem);    /* big statements      */
  --fs-h2:      clamp(2.25rem, 4.5vw, 3.5rem);   /* section headings    */
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.25rem);   /* subsection titles   */
  --fs-body-lg: clamp(1.1875rem, 1.5vw, 1.3125rem); /* lead paragraphs */
  --fs-body:    1.125rem;                        /* body — 18px         */
  --fs-ui:      0.9375rem;                       /* buttons, nav — 15px */
  --fs-meta:    0.75rem;                         /* metadata — 12px     */

  /* Layout */
  --max-w:      1520px;
  --pad-x:      clamp(20px, 4.5vw, 64px);
  --sec-pad:    clamp(104px, 13vw, 184px);   /* vertical section rhythm */

  /* Shape */
  --r-btn: 8px;
  --r-img: 4px;
  --r-field: 8px;

  /* Motion */
  --dur-fast: 0.25s;   /* hovers, small transitions      */
  --dur:      0.7s;    /* scroll reveals                 */
  --dur-slow: 0.9s;    /* image scale on hover           */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);

  /* Header */
  --header-h: 108px;
  --header-h-scrolled: 84px;
}


/* 2. BASE / RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--blue);
  color: #FFFFFF;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: var(--fs-ui);
  border-radius: var(--r-btn);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  top: 16px;
}

/* Page fades in once — kept short so navigation feels immediate. */
@media (prefers-reduced-motion: no-preference) {
  .js body {
    animation: page-in 0.3s ease-out both;
  }
  @keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* 3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.u-hero-title    { font-size: var(--fs-hero);    letter-spacing: -0.03em; line-height: 0.98; }
.u-display       { font-size: var(--fs-display); letter-spacing: -0.028em; line-height: 1.02; }
.u-h2            { font-size: var(--fs-h2); }
.u-h3            { font-size: var(--fs-h3); }

/* Single serif-italic accent word inside a big statement. */
.u-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.u-body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
}

.u-muted { color: var(--ink-sub); }

/* Supporting/small paragraphs are set in Public Sans; headlines, nav,
   and metadata keep their own faces. */
.hero__lede,
.page-hero__lede,
.statement-body p,
.about-teaser__body .u-body-lg,
.service-row__desc,
.service-row__price-note,
.process-step__body,
.process-note p:not(.meta),
.principle__body,
.about-block__body,
.service-detail__body > p,
.service-detail__note,
.contact-aside__note,
.site-footer__tag,
.prose,
.form__status,
.field__error {
  font-family: var(--font-sub);
}

/* Small-caps metadata label — used sitewide. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}

.meta--muted { color: var(--ink-2); }

/* The JC Webfolio identity atom: a small blue square. */
.tick {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--blue);
  flex: none;
}

/* Constrained measure for running text. */
.u-measure {
  max-width: 720px;
}


/* 4. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--sec-pad);
}

.section--flush-top { padding-top: 0; }

.section--surface { background: var(--surface); }

.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}

/* Section head: hairline rule, label left, mono index right.
   The sitewide "specification document" device. */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.sec-head .meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sec-index {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.section--dark .sec-head {
  border-top-color: var(--dark-line);
}

.section--dark .sec-index {
  color: var(--on-dark-2);
}


/* 5. BUTTONS & LINKS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  min-height: 48px;
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-btn);
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.btn .arr {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .arr,
.btn:focus-visible .arr {
  transform: translate(3px, -3px);
}

.btn--primary {
  background: var(--ink);
  color: #FFFFFF;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--blue);
  color: #FFFFFF;
}

/* Small-caps text link with growing underline + moving arrow. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-block: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.tlink:hover::after,
.tlink:focus-visible::after {
  transform: scaleX(1);
}

.tlink .arr {
  transition: transform var(--dur-fast) var(--ease);
}

.tlink:hover .arr,
.tlink:focus-visible .arr {
  transform: translate(2px, -2px);
}

.tlink:hover,
.tlink:focus-visible {
  color: var(--blue);
}

.section--dark .tlink {
  color: var(--on-dark);
}

.section--dark .tlink:hover,
.section--dark .tlink:focus-visible {
  color: #FFFFFF;
}

/* Inline prose link */
.plink {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}

.plink:hover {
  color: var(--blue-deep);
}


/* 6. HEADER & NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  /* Above the mobile menu overlay (z 120) so the wordmark and the
     close control stay visible while the menu is open. */
  z-index: 130;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
  transition: height var(--dur-fast) ease-out;
}

.site-header.is-scrolled .site-header__inner {
  height: var(--header-h-scrolled);
}

/* Brand logo — the official JC Webfolio artwork (script JC over the
   name line), served as a transparent image. The navy name line needs a
   light ground, so the dark footer shows it on a small white plate. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo img {
  display: block;
  height: 80px;
  width: auto;
  transition: height var(--dur-fast) ease-out;
}

.site-header.is-scrolled .logo img {
  height: 64px;
}

.site-footer .logo {
  background: #FCFCFD;
  padding: 12px 18px;
  border-radius: 10px;
}

.site-footer .logo img {
  height: 92px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 40px);
  margin-left: auto;
}

.site-nav__link {
  position: relative;
  padding-block: 8px;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.portal-link {
  position: relative;
  padding-block: 8px;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.portal-link:hover,
.portal-link:focus-visible {
  color: var(--blue);
}

.portal-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.portal-link:hover::after,
.portal-link:focus-visible::after {
  transform: scaleX(1);
}

.site-header .btn {
  padding: 11px 20px;
  min-height: 42px;
}

/* Menu toggle — hidden on desktop */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 130;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  align-items: center;
  justify-content: center;
}

.menu-toggle__box {
  position: relative;
  width: 22px;
  height: 14px;
}

.menu-toggle__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}

.menu-toggle__line:nth-child(1) { top: 0; }
.menu-toggle__line:nth-child(2) { top: 12px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) {
  top: 6px;
  transform: rotate(-45deg);
}


/* 7. MOBILE MENU
   ------------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--pad-x) 40px;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--blue);
}

.mobile-menu__link .meta {
  color: var(--ink-2);
}

.mobile-menu__link[aria-current="page"] {
  color: var(--blue);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu__link {
    opacity: 0;
    transform: translateY(14px);
  }
  .mobile-menu.is-open .mobile-menu__link {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.4s var(--ease),
      transform 0.4s var(--ease),
      color var(--dur-fast) var(--ease);
  }
  .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.05s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.09s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.13s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.17s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.21s; }
}

.mobile-menu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
}

.mobile-menu__foot .btn {
  width: 100%;
}


/* 8. HERO
   ------------------------------------------------------------ */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(48px, 7vh, 88px);
  min-height: min(820px, calc(100svh - var(--header-h)));
  padding-top: clamp(56px, 9vh, 120px);
  padding-bottom: clamp(48px, 7vh, 88px);
}

.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.hero__title {
  max-width: 16ch;
  text-transform: uppercase;
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.hero__lede {
  max-width: 520px;
  color: var(--ink-sub);
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(20px, 2.5vw, 36px);
}

/* Hero entrance — one orchestrated moment, then the page is calm. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__meta,
  .js .hero__title,
  .js .hero__foot {
    opacity: 0;
    transform: translateY(26px);
    animation: hero-in 0.85s var(--ease) forwards;
  }
  .js .hero__meta  { animation-delay: 0.05s; }
  .js .hero__title { animation-delay: 0.15s; }
  .js .hero__foot  { animation-delay: 0.3s; }

  @keyframes hero-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}


/* 9. HOMEPAGE SECTIONS
   ------------------------------------------------------------ */

.media-frame {
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--line);
}

.media-frame img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease);
}

a:hover .media-frame img,
a:focus-visible .media-frame img {
  transform: scale(1.015);
}

/* Homepage showcase — one photograph directly after the hero.
   Width is held near the photo's native resolution so it stays crisp. */
.img-showcase .media-frame {
  width: min(100%, 700px);
}

.img-showcase figcaption {
  margin-top: 20px;
}

/* Two portrait photographs side by side */
.photo-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
}

/* Three portrait photographs in a row */
.photo-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}

/* Positioning statement */
.statement {
  max-width: 22ch;
  text-transform: uppercase;
}

.statement-body {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 680px;
}

/* About teaser (homepage) */
.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.about-teaser__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-teaser__body .u-display {
  text-transform: uppercase;
}

.about-teaser__media {
  margin-top: 12px;
  max-width: 460px;   /* keeps the photograph near native resolution */
}


/* 10. SHARED COMPONENTS
   ------------------------------------------------------------ */

/* --- Service rows (editorial list) --- */
.service-rows {
  border-bottom: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1fr) 176px 48px;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
  padding-block: clamp(36px, 4.5vw, 60px);
  border-top: 1px solid var(--line);
  color: inherit;
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-top: 10px;
  transition: color var(--dur-fast) var(--ease);
}

.service-row__title {
  font-size: clamp(1.5rem, 2.8vw, 2.375rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 14ch;
  transition: transform var(--dur-fast) var(--ease);
}

.service-row__desc {
  color: var(--ink-sub);
  font-size: 1.125rem;
  max-width: 46ch;
  padding-top: 6px;
}

.service-row__price {
  padding-top: 10px;
}

.service-row__price .meta {
  display: block;
}

.service-row__price-note {
  display: block;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--ink-sub);
  line-height: 1.5;
}

.service-row__arr {
  justify-self: end;
  padding-top: 6px;
  font-size: 1.25rem;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.service-row:hover .service-row__title,
.service-row:focus-visible .service-row__title {
  transform: translateX(6px);
}

.service-row:hover .service-row__num,
.service-row:focus-visible .service-row__num {
  color: var(--blue);
}

.service-row:hover .service-row__arr,
.service-row:focus-visible .service-row__arr {
  transform: translate(3px, -3px);
  color: var(--blue);
}

/* --- Process steps --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.process-step {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.process-step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  color: var(--blue);
}

.process-step__title {
  margin-top: clamp(20px, 3vw, 40px);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.process-step__body {
  margin-top: 12px;
  font-size: 1.0625rem;
  color: var(--ink-sub);
  max-width: 34ch;
}

.process-note {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: baseline;
  color: var(--ink-sub);
  font-size: 1.0625rem;
}

.process-note .meta {
  color: var(--blue);
  flex: none;
}

/* --- Why JC Webfolio (dark) --- */
.section--dark.why {
  position: relative;
}

/* faint vertical hairlines — quiet structure, no glow */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--dark-line) 1px, transparent 1px);
  background-size: 25% 100%;
  opacity: 0.35;
}

.why .container {
  position: relative;
}

.why__statement {
  text-transform: uppercase;
  max-width: 14ch;
}

.principles {
  margin-top: clamp(64px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 96px);
}

.principle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 20px;
  padding-block: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--dark-line);
}

.principle .tick {
  margin-top: 8px;
}

.principle__title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.principle__body {
  margin-top: 12px;
  color: var(--on-dark-sub);
  font-size: 1.125rem;
  max-width: 44ch;
}

/* --- Final CTA --- */
.cta-final {
  text-align: left;
}

.cta-final__title {
  text-transform: uppercase;
  max-width: 14ch;
}

.cta-final__actions {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}

/* 11. INNER PAGES
   ------------------------------------------------------------ */

/* Page hero (inner pages) */
.page-hero {
  padding-top: clamp(72px, 10vh, 140px);
  padding-bottom: clamp(56px, 8vh, 112px);
}

.page-hero__title {
  text-transform: uppercase;
  max-width: 14ch;
}

.page-hero__lede {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 640px;
  color: var(--ink-sub);
}

.page-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

/* --- Services page detail sections --- */
.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 112px);
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line);
}

.service-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.service-detail__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  color: var(--blue);
}

.service-detail__title {
  text-transform: uppercase;
  max-width: 14ch;
}

.service-detail__price {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
}

.service-detail__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-detail__body > p {
  color: var(--ink-sub);
  max-width: 56ch;
}

.include-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
}

.include-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.include-list .tick {
  width: 5px;
  height: 5px;
  position: relative;
  top: -2px;
}

.service-detail__note {
  font-size: 1rem;
  color: var(--ink-sub);
  padding-top: 4px;
  max-width: 56ch;
}

.service-detail__note strong {
  font-weight: 500;
  color: var(--ink);
}

/* --- About page --- */
.about-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 96px);
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}

.about-block h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: start;
}

.about-block__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink-sub);
  max-width: 62ch;
}

.about-block__body strong {
  color: var(--ink);
  font-weight: 500;
}

.client-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}

.client-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  color: var(--ink);
}

.client-list .tick {
  width: 5px;
  height: 5px;
  position: relative;
  top: -2px;
}

/* --- Contact page --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 6vw, 128px);
  align-items: start;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

.contact-aside__item {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.contact-aside__item .meta {
  color: var(--ink-2);
  margin-bottom: 10px;
}

.contact-aside__item a {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}

.contact-aside__item a:hover,
.contact-aside__item a:focus-visible {
  color: var(--blue);
}

.contact-aside__lede {
  max-width: 20ch;
}

.contact-aside__note {
  font-size: 1.0625rem;
  max-width: 40ch;
  padding-top: 4px;
}

/* --- Legal pages / simple prose --- */
.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  color: var(--ink-sub);
}

.page-hero--tall {
  min-height: 55vh;
}

.page-hero__actions {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}


/* 12. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--dark);
  color: var(--on-dark);
  padding-top: clamp(80px, 10vw, 140px);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.site-footer__tag {
  color: var(--on-dark-sub);
  font-size: 1.0625rem;
  max-width: 30ch;
}

.site-footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 20px;
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__col a {
  display: inline-block;
  padding-block: 5px;
  font-size: var(--fs-ui);
  color: var(--on-dark);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--blue);
  color: #7DA4FF;
}

/* Oversized wordmark across the footer.
   Sized from the measured width of "JC WEBFOLIO" in Instrument Sans 600
   (≈6.94× the font size, +margin → /7.2) so the full name always fits
   the container with nothing cut off. */
.site-footer__mark {
  border-top: 1px solid var(--dark-line);
  padding-block: clamp(24px, 3vw, 48px) 0;
}

.site-footer__mark span {
  display: block;
  font-size: min(12rem, calc((100vw - 2 * var(--pad-x)) / 7.2));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--on-dark);
  white-space: nowrap;
  user-select: none;
}

/* Signature statement beneath the wordmark */
.site-footer__sig {
  margin-top: clamp(12px, 1.6vw, 22px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--on-dark);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 28px;
  border-top: 1px solid var(--dark-line);
}

.site-footer__bottom .meta {
  color: var(--on-dark-2);
}

.site-footer__legal {
  display: flex;
  gap: 28px;
}

.site-footer__legal a {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--on-dark);
}


/* 13. FORMS
   ------------------------------------------------------------ */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(20px, 2vw, 32px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.field .req {
  color: var(--blue);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: 14px 16px;
  min-height: 50px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111110' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #C9C9C3;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9C9B94;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}

.field__error {
  display: none;
  font-size: 0.8125rem;
  color: var(--error);
}

.field.has-error .field__error {
  display: block;
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.form__status {
  display: none;
  padding: 16px 20px;
  border-radius: var(--r-field);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.form__status.is-visible {
  display: block;
}

.form__status--error {
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.25);
  color: #8E2A1F;
}

.form__status--success {
  background: rgba(21, 94, 239, 0.06);
  border: 1px solid rgba(21, 94, 239, 0.22);
  color: var(--blue-deep);
}

.form__status--notice {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.form__status a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* 14. MOTION & REVEAL SYSTEM
   ------------------------------------------------------------
   Content is fully visible by default. Only when JS is present
   AND the visitor allows motion do elements start hidden and
   fade up on scroll. */
@media (prefers-reduced-motion: no-preference) {
  .js.anim .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .js.anim .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .js.anim .reveal--d1.is-in { transition-delay: 0.08s; }
  .js.anim .reveal--d2.is-in { transition-delay: 0.16s; }
  .js.anim .reveal--d3.is-in { transition-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 15. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------ */

/* ---- ≤ 1180px : header condenses ---- */
@media (max-width: 1180px) {
  .portal-link {
    display: none;
  }
}

/* ---- ≤ 1024px : grids relax ---- */
@media (max-width: 1024px) {
  .service-row {
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    grid-template-areas:
      "num title arr"
      "num desc  arr"
      "num price arr";
    row-gap: 14px;
  }
  .service-row__num   { grid-area: num; }
  .service-row__title { grid-area: title; max-width: none; }
  .service-row__desc  { grid-area: desc; padding-top: 0; }
  .service-row__price { grid-area: price; padding-top: 4px; }
  .service-row__arr   { grid-area: arr; }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 56px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---- ≤ 900px : nav switches to mobile menu, two-cols stack ---- */
@media (max-width: 900px) {
  .site-nav,
  .site-header__actions .btn,
  .site-header__actions .portal-link {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero__foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .about-teaser,
  .contact-grid,
  .about-block,
  .service-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-teaser__media {
    order: -1;
    margin-top: 0;
    max-width: 560px;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≤ 640px : mobile refinements ---- */
@media (max-width: 640px) {
  :root {
    --header-h: 88px;
    --header-h-scrolled: 78px;
  }

  .logo img {
    height: 58px;
  }

  .site-header.is-scrolled .logo img {
    height: 52px;
  }

  .site-footer .logo img {
    height: 72px;
  }

  .hero {
    min-height: 0;
    padding-top: clamp(48px, 8vh, 72px);
  }

  .hero__meta .meta:last-child {
    display: none;
  }

  .img-showcase .media-frame {
    width: 100%;
  }

  .photo-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .include-list,
  .client-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cta-final__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}