/* ==========================================================================
   Design rules for alexrudzinski.com
   Loaded after site.css on every page, so these values take priority.
   Change a value here and it updates across the whole site.
   ========================================================================== */

:root {
  /* ---- Type scale ------------------------------------------------------
     Each size has a minimum (phones) and maximum (large screens) and grows
     smoothly in between. Format: clamp(min, preferred, max).            */
  --text-small:   clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);  /* 14 → 15px  */
  --text-body:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem); /* 16 → 18px  */
  --text-lead:    clamp(1.0625rem,0.98rem + 0.4vw,  1.25rem);  /* 17 → 20px  */
  --text-h4:      clamp(1.125rem, 1.02rem + 0.5vw,  1.5rem);   /* 18 → 24px  */
  --text-h3:      clamp(1.375rem, 1.2rem + 0.85vw,  2rem);     /* 22 → 32px  */
  --text-h2:      clamp(1.75rem,  1.4rem + 1.6vw,   2.75rem);  /* 28 → 44px  */
  --text-h1:      clamp(2.25rem,  1.65rem + 2.6vw,  3.75rem);  /* 36 → 60px  */
  --text-display: clamp(2.75rem,  1rem + 9vw,       9rem);     /* 44 → 144px */

  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  /* ---- Colours for text ----------------------------------------------- */
  --text-strong: #0c0407;
  --text-muted:  #5c5c5c;   /* replaces #868686 / #666 / gray; easier to read */

  /* ---- Spacing scale ---------------------------------------------------
     Use these for all gaps, padding and margins.                         */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-s:   1rem;     /* 16px */
  --space-m:   1.5rem;   /* 24px */
  --space-l:   2rem;     /* 32px */
  --space-xl:  clamp(2.5rem, 2rem + 2vw, 3.5rem);   /* 40 → 56px  */
  --space-2xl: clamp(3rem, 2.25rem + 3.5vw, 5rem);  /* 48 → 80px  */
  --space-3xl: clamp(4rem, 2.5rem + 6vw, 8rem);     /* 64 → 128px */

  /* ---- Layout ---------------------------------------------------------- */
  --content-max: 1280px;   /* widest content area */
  --text-max: 68ch;        /* comfortable line length for paragraphs */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);  /* side margins 16 → 48px */
  --nav-clearance: clamp(6.5rem, 5.5rem + 4vw, 9rem); /* space under fixed nav */
}

/* ==========================================================================
   Layout
   ========================================================================== */

.section-spacing {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.main-content-container {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* One content width for the whole site: nav, page content and footer
   all line up with the logo and the menu button. */
.page-wrapper { display: block; }
.main-wrapper {
  width: 100%;
  max-width: none;
}
.footer-bottom-layout {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Section spacing: one rhythm for every page */
.hero-section,
.p-details-hero-section {
  padding-top: var(--nav-clearance);
}
.hero-section { padding-bottom: var(--space-2xl); }
.feature-section { padding-top: var(--space-2xl); }
.footer-section { padding-top: var(--space-3xl); padding-bottom: var(--space-l); }

.feature-title-wrap { margin-bottom: var(--space-xl); }
.common-section-title-wrap { margin-bottom: var(--space-m); }

.feature-layout {
  grid-column-gap: var(--space-xl);
  grid-row-gap: var(--space-2xl);
}

/* Project pages */
.p-details-live-btn-wrap { margin-top: var(--space-m); }
.p-details-info-wrap {
  grid-column-gap: var(--space-xl);
  grid-row-gap: var(--space-m);
  margin-bottom: var(--space-2xl);
}
.p-intro-container,
.p-container-text-single,
.p-container-text-single.volume-south {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.p-centre-container.second { margin-top: var(--space-xl); }
.p-details-content-wrap { margin-top: var(--space-xl); }

/* ==========================================================================
   Type
   ========================================================================== */

/* Large display titles: home hero and project titles */
.section-title,
.section-title.home-hero-title,
.section-title.project,
.section-title.brickman {
  overflow-wrap: normal;   /* never split a word across lines */
  word-break: normal;
  hyphens: manual;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
}

/* "Sydney, AU" and similar sub-headings in the hero */
.hero-title {
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
}

/* Small intro line: "Hey 👋 — I'm Alex Rudzinski" */
.header-text,
.header-text.home {
  font-size: var(--text-lead);
  line-height: var(--leading-heading);
}

/* Section titles: "Featured", About page sections */
.common-section-title,
.common-section-title-2 {
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
}

/* Section headings on project pages: "Overview", "Creative" */
.section-heading {
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
  margin-top: 0;
  margin-bottom: var(--space-s);
}

/* Project card titles */
.feature-layout-title {
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
}

/* Project / Organisation / Industry labels */
.p-details-info-title {
  font-size: var(--text-h4);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-2xs);
}

/* Body text: same size, colour and spacing everywhere */
.hero-text,
.section-text,
.section-paragraph,
.feature-layout-text,
.common-section-text,
.common-section-text-2,
.problem-solving-text,
.p-details-info-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  letter-spacing: 0;
}

.section-text,
.section-paragraph,
.common-section-text,
.common-section-text-2 {
  max-width: var(--text-max);
}

.section-text { margin-bottom: var(--space-l); }

.np-list-item {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* Project details and role lists: facts, not reading text.
   Inter keeps them distinct from Merriweather body text; regular weight
   and the same colour as body text keep them easy to read. */
.p-details-info-text,
.np-list-item {
  font-family: Inter, sans-serif;
  font-weight: 400;
}

/* Buttons: were sized by screen width, which made them too big on phones */
.project-btn-teext,
.problem-solving-btn-text {
  font-size: var(--text-small);
  line-height: 1.2;
}

.p-details-live-btn-text {
  font-size: var(--text-h4);
  line-height: 1.2;
  letter-spacing: 0;
}

/* Stops sliders on some project pages making the page scroll sideways */
.page-wrapper { overflow-x: clip; }

/* ==========================================================================
   Site menu (all screen sizes)
   The round menu button opens the menu below the logo bar and pushes the
   page down. Projects expands to a list of every project.
   ========================================================================== */

:root {
  --menu-link: clamp(2.25rem, 1.2rem + 4.2vw, 6rem);       /* 36 → 96px */
  --menu-project: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);   /* 22 → 40px */
}

/* Round menu button, at every screen size */
.nav-right { display: flex; align-items: center; }
.navbar-wrap {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 54px;
  height: 54px;
  margin: -7px 0;          /* keeps the logo bar the same height */
  border: 1px solid #e9e9e9;
  border-radius: 100%;
  background-color: #fff;
  cursor: pointer;
}
.navbar-wrap:focus { outline: none; }
.navbar-wrap:focus-visible { outline: 2px solid var(--_new-portfolio-colours---portfolio-blue); outline-offset: 3px; }
.navbar-bar {
  width: 18px;
  height: 2px;
  padding: 0;
  background-color: var(--text-strong);
}
.menu-open .navbar-bar.bar-1 { transform: translateY(7px) rotate(45deg); }
.menu-open .navbar-bar.bar-2 { opacity: 0; }
.menu-open .navbar-bar.bar-3 { transform: translateY(-7px) rotate(-45deg); }

.site-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  background: #fff;
}
.site-menu.is-open { grid-template-rows: 1fr; }
.site-menu-inner { min-height: 0; overflow: hidden; }

.site-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + var(--space-l));  /* clears the logo bar */
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid #e6e6e6;
}

/* Large links in the heading style */
.site-menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  padding: 0.06em 0;
  background: none;
  border: 0;
  color: var(--text-strong);
  font-family: Inter, sans-serif;
  font-size: var(--menu-link);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.site-menu-link:hover,
.site-menu-link:focus-visible { color: var(--_new-portfolio-colours---portfolio-blue); }

.site-menu-count {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  align-self: flex-start;
  margin-top: 0.6em;
}

/* Plus sign that turns into a minus when the list is open */
.site-menu-icon {
  position: relative;
  width: 0.36em;
  height: 0.36em;
  align-self: center;
  margin-left: 0.1em;
}
.site-menu-icon::before,
.site-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.06em;
  min-height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.site-menu-icon::after { transform: translateY(-50%) rotate(90deg); }
.site-menu-toggle[aria-expanded="true"] .site-menu-icon::after {
  transform: translateY(-50%) rotate(0deg);
}

/* Project list */
.site-menu-projects {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-menu-projects.is-open { grid-template-rows: 1fr; }
.site-menu-projects-inner { min-height: 0; overflow: hidden; }
.site-menu-projects ul {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0 var(--space-l);
}
.site-menu-projects li { margin: 0; }
.site-menu-projects a {
  display: block;
  padding: 0.22em 0;
  color: var(--text-strong);
  font-family: Inter, sans-serif;
  font-size: var(--menu-project);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 0.2s ease;
  /* One line per title. If a title is too long, the menu shows only the
     part before its first punctuation mark (see menu.js). An ellipsis is
     the last resort for a title with no punctuation. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-menu-projects a.is-short .t-rest { display: none; }
.site-menu-projects a:hover,
.site-menu-projects a:focus-visible,
.site-menu-projects a[aria-current="page"] {
  color: var(--_new-portfolio-colours---portfolio-blue);
}
.site-menu-projects .site-menu-all {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-muted);
}

/* With the menu open, close the gap above the page title */
.hero-section,
.p-details-hero-section,
.projects-hero-section,
.about-hero-section { transition: padding-top 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-open .hero-section,
.menu-open .p-details-hero-section,
.menu-open .projects-hero-section,
.menu-open .about-hero-section { padding-top: var(--space-xl); }

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu-projects,
  .navbar-bar,
  .hero-section,
  .p-details-hero-section,
  .projects-hero-section,
  .about-hero-section,
  .site-menu-icon::before,
  .site-menu-icon::after { transition: none !important; }
}

/* ==========================================================================
   Contact form (Formspree)
   ========================================================================== */

/* Hidden field that only spam bots fill in */
.contact-trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-status {
  padding: var(--space-m);
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.contact-status[hidden] { display: none; }
.contact-done { background: #eef7ee; color: #1f4d22; }
.contact-fail { background: #fbeeee; color: #7a1f1f; margin-top: var(--space-s); }
.contact-fail a { color: inherit; display: inline; text-decoration: underline; }
.contact-done:focus { outline: none; }

.footer-contact-us-btn:disabled { opacity: 0.6; cursor: wait; }

/* Send button */
.footer-contact-us-btn-wrap { display: inline-flex; margin-top: var(--space-s); }
.footer-contact-us-btn {
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  line-height: 1.2;
  cursor: pointer;
}
.footer-contact-us-btn-icon { pointer-events: none; }

/* ==========================================================================
   Page layouts: home, about, projects and footer
   Every section uses the same content width as the nav, and on desktop
   the same three-column grid as the project pages: a heading or intro in
   the left column, content in the right two.
   ========================================================================== */

/* About and Projects containers on the shared width */
.container,
.problem-solving-layout {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
.container-main-projects {
  width: 100%;
  max-width: var(--content-max);
  margin: var(--space-xl) auto 0;
}
.services-hero-thumb { width: 100%; height: auto; display: block; }
.services-hero-thumb-wrap { margin-top: var(--space-l); }

/* Section headings sit on the left edge like everything else */
.feature-title-wrap { margin-bottom: var(--space-xl); }
.feature-title-wrap,
.common-section-title.home { text-align: left; justify-content: flex-start; }

@media screen and (min-width: 992px) {
  /* Clients, About "Hello", and the footer contact: split layout */
  .sponsor-layout,
  .problem-solving-item,
  .footer-top-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-xl);
    row-gap: 0;
    align-items: start;
    justify-content: stretch;
  }
  .sponsor-layout > :first-child,
  .problem-solving-item > :first-child,
  .footer-top-layout > :first-child { grid-column: 1; max-width: none; }
  .sponsor-layout > :last-child,
  .problem-solving-item > :last-child,
  .footer-top-layout > :last-child { grid-column: 2 / 4; max-width: none; width: 100%; }
  .footer-top-layout { margin-bottom: var(--space-3xl); }
}

/* Clients logo tiles: one gap size, matching the project galleries */
.sponsor-thumb-grid { gap: var(--space-m); max-width: none; }


/* Form lines up with the heading on small screens */
.footer-contact-us { margin-left: 0; margin-right: 0; }

@media screen and (max-width: 991px) {
  /* Client logos: three across, so nine logos make three full rows */
  .sponsor-layout { flex-direction: column; gap: var(--space-l); }
  .sponsor-thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; }
}

/* ==========================================================================
   Buttons and hover states
   One hover style everywhere, matching the menu button: the button fills
   with blue and the text and icons turn white, in one smooth fade.
   Borders never change width, so nothing shifts on hover.
   ========================================================================== */

:root {
  --blue: var(--_new-portfolio-colours---portfolio-blue);   /* #008cff */
  --blue-deep: #0072d1;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hover-time: 0.35s;
}

/* Outline buttons: "view project", project website, email, send */
.project-btn-link,
.p-details-live-btn,
.problem-solving-btn,
.footer-contact-us-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  border: 1px solid var(--text-strong);
  border-radius: 999px;
  color: var(--text-strong);
  background-color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--hover-time) var(--ease-out),
    border-color var(--hover-time) var(--ease-out),
    color var(--hover-time) var(--ease-out);
}
.project-btn-link,
.problem-solving-btn,
.footer-contact-us-btn {
  padding: 0.75em 1.25em;
  font-size: var(--text-small);
  line-height: 1.2;
}
.p-details-live-btn { padding: 0.6em 1em 0.6em 1.15em; }

.project-btn-link:hover,
.p-details-live-btn:hover,
.problem-solving-btn:hover,
.footer-contact-us-btn:hover,
.project-btn-link:focus-visible,
.p-details-live-btn:focus-visible,
.problem-solving-btn:focus-visible,
.footer-contact-us-btn:focus-visible {
  color: #fff;
  background-color: var(--blue);
  border-color: var(--blue);
}
.project-btn-link:focus-visible,
.p-details-live-btn:focus-visible,
.problem-solving-btn:focus-visible,
.footer-contact-us-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Arrow icons follow the text colour */
.project-btn-text-icon,
.btn-text-icon-2,
.btn-arrow {
  width: 1em;
  height: 1em;
  flex: none;
  line-height: 0;
}
.project-btn-text-icon svg,
.btn-text-icon-2 svg { width: 100%; height: 100%; display: block; }
.project-btn-text-icon path,
.btn-text-icon-2 path,
.btn-arrow path { fill: currentColor; }
.project-btn-teext,
.problem-solving-btn-text,
.p-details-live-btn-text { color: inherit; }

.footer-contact-us-btn:disabled { opacity: 0.6; cursor: wait; }

/* Round menu button */
.navbar-wrap {
  transition:
    background-color var(--hover-time) var(--ease-out),
    border-color var(--hover-time) var(--ease-out);
}
.navbar-bar {
  transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    background-color var(--hover-time) var(--ease-out);
}
.navbar-wrap:hover { background-color: var(--blue); border-color: var(--blue); }
.navbar-wrap:hover .navbar-bar { background-color: #fff; }

/* Gallery arrows */
.pl-prev,
.pl-next {
  transition:
    background-color var(--hover-time) var(--ease-out),
    border-color var(--hover-time) var(--ease-out),
    color var(--hover-time) var(--ease-out),
    opacity 0.2s ease;
}
.pl-prev:not(:disabled):hover,
.pl-next:not(:disabled):hover { background-color: var(--blue); border-color: var(--blue); color: #fff; }

/* Text links: footer LinkedIn, menu links and project titles turn blue */
.social-link {
  color: var(--text-strong);
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  text-decoration: none;
  transition: color var(--hover-time) var(--ease-out);
}
.social-link:hover,
.social-link:focus-visible { color: var(--blue); }
.site-menu-link,
.site-menu-projects a { transition: color var(--hover-time) var(--ease-out); }

/* Project cards: only the image and the button are links, so only the
   image responds on hover (it lightens slightly) */
.feature-thumb { transition: opacity var(--hover-time) var(--ease-out); }
.feature-thumb-wrap a:hover .feature-thumb { opacity: 0.88; }

/* Client logos: zoom slightly on hover */
.sponsor-thumb-wrap { overflow: hidden; }
.sponsor-thumb { transition: transform 0.6s var(--ease-out); }
.sponsor-thumb-wrap:hover .sponsor-thumb { transform: scale(1.1); }

/* Client logos: move up and fade in as they scroll into view (reveal.js) */
.reveal-ready .sponsor-thumb-wrap {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-ready .sponsor-thumb-wrap.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .project-btn-link,
  .p-details-live-btn,
  .problem-solving-btn,
  .footer-contact-us-btn,
  .navbar-wrap,
  .navbar-bar,
  .pl-prev,
  .pl-next,
  .social-link,
  .feature-thumb,
  .sponsor-thumb { transition: none !important; }
  .sponsor-thumb-wrap:hover .sponsor-thumb { transform: none; }
}

/* ==========================================================================
   Base text and form fields
   ========================================================================== */

body {
  font-family: Inter, sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.footer-contact-us-input,
.footer-contact-us-textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.95em 1.1em;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  background: #fff;
  color: var(--text-strong);
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  line-height: 1.4;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.footer-contact-us-textarea { min-height: 9rem; resize: vertical; }
/* Phones zoom in on form fields with text smaller than 16px */
@media screen and (max-width: 991px) {
  .footer-contact-us-input,
  .footer-contact-us-textarea { font-size: 16px; }
}
.footer-contact-us-input::placeholder,
.footer-contact-us-textarea::placeholder { color: #8a8a8a; }
.footer-contact-us-input:hover,
.footer-contact-us-textarea:hover { border-color: #b5b5b5; }
.footer-contact-us-input:focus,
.footer-contact-us-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15);
}
.footer-contact-us-label {
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
}
.footer-contact-us-input-wrap,
.footer-contact-us-textarea-wrap { margin-bottom: var(--space-s); }
.footer-contact-us-grid { gap: 0 var(--space-m); }

/* 404 page */
.notfound-section { min-height: 70vh; padding-bottom: var(--space-3xl); }
.notfound-text { margin-top: var(--space-m); font-size: var(--text-lead); color: var(--text-muted); }
.notfound-links { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

/* Section spacing on the shared scale */
.sponsor-section { padding-top: var(--space-3xl); }

/* ==========================================================================
   Home hero
   Desktop and tablet: intro line across the top; title, location, intro
   text and button on the left; the round portrait on the right, extending
   under the end of the title. Phones: the portrait floats right below the
   location line and the intro text flows around it.
   ========================================================================== */

.home-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* rows: intro, title, location, text, text, button, then a flexible row
     that takes up any extra height from the portrait, so the text rows
     never spread apart */
  grid-template-rows: auto auto auto auto auto auto 1fr;
  column-gap: var(--space-xl);
  row-gap: 0;
  align-items: start;
}
.home-hero-intro { grid-column: 1 / -1; grid-row: 1; margin: 0 0 var(--space-m); }
.home-hero-text { display: contents; }
.home-hero .section-title { grid-column: 1 / 3; grid-row: 2; margin: 0; position: relative; z-index: 2; }
.home-hero .hero-title { grid-column: 1 / 3; grid-row: 3; margin: var(--space-m) 0 var(--space-l); position: relative; z-index: 2; }
.home-hero .hero-text {
  grid-column: 1 / 3;
  width: auto;
  max-width: min(36rem, 70%);   /* stays clear of the portrait */
  margin: 0 0 var(--space-s);
  position: relative;
  z-index: 2;
}
.home-hero .hero-text:nth-of-type(1) { grid-row: 4; }
.home-hero .hero-text:nth-of-type(2) { grid-row: 5; }
.home-hero .btn-primary { grid-column: 1 / 3; grid-row: 6; justify-self: start; }

/* Portrait: a circle in the right third that extends a little to the
   left so the end of the title overlaps it, giving some depth */
.home-hero-portrait {
  grid-column: 3;
  grid-row: 2 / 8;
  position: relative;
  z-index: 1;
  justify-self: end;
  width: calc(100% + var(--space-xl) + 46%);
  margin-right: -1.5%;
  margin-top: -1.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f2f0;
  translate: var(--px, 0px) var(--py, 0px);
  scale: var(--ps, 1);
  transition: scale 0.6s var(--ease-out);
  will-change: translate;
}
.home-hero-portrait .hero-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
}

/* Solid blue button: one per page, for the main action */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-m);
  padding: 0.75em 1.25em;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background-color: var(--blue);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    background-color var(--hover-time) var(--ease-out),
    border-color var(--hover-time) var(--ease-out);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background-color: var(--blue-deep);
  border-color: var(--blue-deep);
}
.btn-primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home-hero { grid-template-columns: 3fr 2fr; }
  .home-hero .section-title,
  .home-hero .hero-title,
  .home-hero .hero-text,
  .home-hero .btn-primary { grid-column: 1; }
  .home-hero-portrait { grid-column: 2; width: calc(100% + var(--space-xl) + 10%); }
}

@media screen and (max-width: 767px) {
  /* Phones: the portrait floats to the right just below the location
     line, tucked slightly under it, and the intro text wraps around the
     curve of the circle. The title and location always sit on top. */
  .home-hero { display: block; }
  .home-hero-intro { margin-bottom: var(--space-s); }
  .home-hero-text { display: block; }
  .home-hero-text::after { content: ""; display: block; clear: both; }
  .home-hero .hero-title { margin: var(--space-2xs) 0 var(--space-s); }
  .home-hero-portrait {
    float: right;
    width: 54%;
    margin: calc(-1 * var(--space-m)) 0 var(--space-xs) var(--space-xs);
    shape-outside: circle(50%);
    shape-margin: var(--space-xs);
    translate: none;
  }
  .home-hero .hero-text { max-width: none; margin: 0 0 var(--space-s); }
  .home-hero .btn-primary { margin-top: var(--space-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .home-hero-portrait { transition: none !important; translate: none; scale: 1; }
}

/* ==========================================================================
   Logo and nav bar
   The hand-drawn AR mark is the main brand element, so it is shown large.
   ========================================================================== */

:root {
  --logo-height: clamp(3.25rem, 2.25rem + 3vw, 5.5rem);    /* 52 → 88px */
  --nav-pad: clamp(1rem, 0.75rem + 1vw, 1.75rem);          /* 16 → 28px */
  --nav-height: calc(var(--logo-height) + 2 * var(--nav-pad));
  --nav-clearance: calc(var(--nav-height) + clamp(2rem, 1rem + 3vw, 3.5rem));
}
.nav-bar { padding-top: var(--nav-pad); padding-bottom: var(--nav-pad); }
.nav-layout { align-items: center; }
.logo-wrap { display: inline-block; line-height: 0; }
.logo {
  display: block;
  height: var(--logo-height);
  width: auto;
  transform-origin: 30% 70%;
  transition: transform 0.45s var(--ease-out);
}
.logo-wrap:hover .logo,
.logo-wrap:focus-visible .logo { transform: rotate(-4deg) scale(1.04); }
.logo-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 4px; }
.navbar-wrap { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .logo { transition: none; }
  .logo-wrap:hover .logo { transform: none; }
}

/* Client logos: each sized by area (width set per logo in the page),
   so wide and tall logos carry similar visual weight */
.sponsor-thumb-wrap {
  position: relative;
  aspect-ratio: 1 / 1;     /* square tiles, all the same size */
  padding: 0;
}
.sponsor-thumb {
  width: var(--logo-w, 60%);
  height: auto;
  max-width: none;
  max-height: 72%;
  object-fit: contain;
}

/* Home intro: vertical separator between "Hey" and the name */
.home-hero-intro { display: flex; align-items: center; flex-wrap: wrap; gap: 0; grid-column-gap: 0; grid-row-gap: 0; }
.home-hero-intro .header-text { margin: 0; line-height: 1.3; }
.home-hero-intro .section-text-separator {
  width: 2px;
  height: 1.1em;
  margin: 0 var(--space-xs);
  font-size: inherit;
  background-color: currentColor;
}