/* ==========================================================================
   ai.open-lines.co — Lindsay LaShell · Systems and AI Implementation
   Part 1: tokens, resets, typography, links, utilities, focus
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties (spec Section 5)
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette (from open-lines.co) */
  --teal: #005c68;
  --orange: #ee5823;
  --yellow: #ffc808;
  --turquoise: #00b4ae;
  --white: #ffffff;
  --black: #000000;

  /* Fonts */
  --font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Crimson Text", Georgia, serif;

  /* Type scale (desktop) */
  --fs-h1: 3.6rem;
  --fs-h2: 2.125rem;
  --fs-h3: 1.5rem;
  --fs-accent: 2rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6.25rem;

  /* Layout */
  --max-wide: 1200px;
  --max-text: 850px;
  --gutter: 40px;

  /* Decorative bars */
  --bar-thick: 12px;
}

/* --------------------------------------------------------------------------
   Base resets
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* Spacing is set explicitly per section in part 2. */
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

/* Bullets are re-enabled only on the Section 4 lists (part 2). */
ul {
  padding-left: 0;
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   Typography (spec Section 5, "Type treatments")
   -------------------------------------------------------------------------- */

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
}

h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
}

p,
li {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 1px;
}

strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Links (spec Section 5, "Links (default)")
   Section-specific colors are set in part 2 (spec Section 6).
   -------------------------------------------------------------------------- */

a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Skip link (spec Section 8)
   Hidden until focused; then top-left, black text on yellow, 1rem padding.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  z-index: 100;
  width: auto;
  height: auto;
  padding: 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  top: 0;
  left: 0;
  background-color: var(--yellow);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Focus styles (spec Section 13) — never removed
   Default covers white, yellow and card backgrounds.
   -------------------------------------------------------------------------- */

a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* Teal backgrounds: hero (and the case-studies heading area) */
.hero-wrap a:focus-visible {
  outline-color: var(--yellow);
}

/* Turquoise background: the close CTA */
.close a:focus-visible {
  outline-color: var(--black);
}

/* ==========================================================================
   Part 2: components and section styles (desktop)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared layout
   -------------------------------------------------------------------------- */

/* Sections are full-bleed; the inner container holds the content. */
.inner {
  max-width: var(--max-wide);
  margin-left: auto;
  margin-right: auto;
  padding: 100px var(--gutter);
}

/* Paragraph rhythm inside multi-paragraph blocks. */
p + p {
  margin-top: var(--space-s);
}

/* --------------------------------------------------------------------------
   Component: vertical accent bar (spec Section 5)
   12px wide, full height of the heading beside it, 20px to its right.
   -------------------------------------------------------------------------- */

.accent-heading {
  display: flex;
  align-items: stretch;
  /* Hug the heading text: as a grid item it would otherwise stretch to the
     full row height and carry the bar down with it. */
  align-self: start;
  text-align: left;
}

.accent-heading::before {
  content: "";
  flex: 0 0 var(--bar-thick);
  margin-right: 20px;
  background-color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Component: short horizontal bar (spec Section 5)
   -------------------------------------------------------------------------- */

.short-bar {
  width: 95px;
  height: 15px;
  margin: 40px 0;
  background-color: var(--yellow);
}

/* --------------------------------------------------------------------------
   Component: stripes (spec Section 5)
   12 stripes, 10px wide, 18px gap, 140px tall.
   Sequence repeats orange, yellow, teal, turquoise.
   One 4-stripe cycle is 112px; 3 cycles end exactly at 318px.
   -------------------------------------------------------------------------- */

.stripes {
  flex: 0 0 318px;
  width: 318px;
  height: 140px;
  background-image: repeating-linear-gradient(
    to right,
    var(--orange) 0, var(--orange) 10px,
    transparent 10px, transparent 28px,
    var(--yellow) 28px, var(--yellow) 38px,
    transparent 38px, transparent 56px,
    var(--teal) 56px, var(--teal) 66px,
    transparent 66px, transparent 84px,
    var(--turquoise) 84px, var(--turquoise) 94px,
    transparent 94px, transparent 112px
  );
}

/* --------------------------------------------------------------------------
   Component: two-line CTA (spec Section 5)
   Text sitting on a 12px colored bar. No uppercase, no underline.
   -------------------------------------------------------------------------- */

.cta {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: var(--bar-thick) solid var(--cta-bar);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  text-decoration: none;
}

.cta:hover {
  border-bottom-color: var(--cta-bar-hover);
}

/* --------------------------------------------------------------------------
   Section 1: header + hero (teal)
   -------------------------------------------------------------------------- */

.hero-wrap {
  background-color: var(--teal);
}

.site-header {
  padding: 15px 40px;
}

.site-header a {
  display: inline-block;
  text-decoration: none;
}

.site-header img {
  width: 200px;
  height: auto;
}

.hero .inner {
  padding: 100px;
}

.hero__content {
  max-width: 800px;
  text-align: left;
}

.hero h1 {
  margin-bottom: 15px;
  color: var(--white);
}

/* Orange underline that repeats on every wrapped line. Decorative. */
.underline {
  background-image: linear-gradient(
    to bottom,
    transparent 86%,
    var(--orange) 87%,
    var(--orange) 100%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tagline {
  max-width: 800px;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: var(--fs-accent);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

.rate {
  margin-top: 30px;
  color: var(--white);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 25px;
}

.contact-links li {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--white);
}

.contact-links a {
  /* Vertical padding keeps the tap target at least 44px tall. */
  display: inline-block;
  padding: 10px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-links a:hover {
  color: var(--yellow);
  text-decoration-thickness: 2px;
}

.contact-links .sep {
  padding: 0 0.5em;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Section 2: intro + headshot (white)
   -------------------------------------------------------------------------- */

.intro {
  background-color: var(--white);
  /* Clips the stripes where they run off the left edge. */
  overflow: hidden;
}

/* Two equal columns, headshot left and copy right, matching
   open-lines.co/consulting-for-entrepreneurs.
   1022px = 421 + 100 gap + 421, plus the two 40px gutters, so each
   column resolves to exactly the headshot's 421px. */
.intro .inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 100px;
  max-width: 1022px;
}

/* Stripes sit outside the columns and bleed off the left of the viewport,
   ending 70px short of the first column. Decorative, and clipped by .intro. */
.intro .stripes {
  position: absolute;
  top: 50%;
  right: calc(100% + 30px);
  transform: translateY(-50%);
}

.intro__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.intro__text {
  max-width: 560px;
}

.intro__text p {
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Section 3: How I Work (turquoise)
   -------------------------------------------------------------------------- */

.how-i-work {
  background-color: var(--turquoise);
}

.how-i-work .inner {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 50px;
}

.how-i-work h2 {
  --accent-color: var(--yellow);
  color: var(--black);
}

.work-points {
  display: grid;
  gap: 40px;
}

.work-point h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--black);
}

.work-point p {
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Section 4: Real Business Problems I Solve (yellow)
   -------------------------------------------------------------------------- */

.problems {
  background-color: var(--yellow);
}

.problems h2 {
  --accent-color: var(--turquoise);
  margin-bottom: 50px;
  color: var(--black);
}

.problems__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.problems h3 {
  margin: 0 0 16px;
  color: var(--black);
}

.problems ul {
  padding-left: 1.25em;
  font-size: var(--fs-body);
  list-style: disc;
}

.problems li {
  margin-bottom: 8px;
  color: var(--black);
}

.problems li::marker {
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Section 5: Tools (white)
   -------------------------------------------------------------------------- */

.tools {
  background-color: var(--white);
}

.tools .inner {
  max-width: var(--max-text);
  text-align: center;
}

.tools h2 {
  margin-bottom: 30px;
  color: var(--black);
}

.tools-list {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--black);
}

/* Tool names never break mid-name. */
.tool {
  white-space: nowrap;
}

/* Exception: "Claude (Chat, CoWork and Code)" is 317px as one unbreakable
   unit, wider than the 256px container at 320px, which would force the page
   to scroll sideways. It wraps at spaces instead, so each name stays intact
   while Section 11's no-horizontal-scroll rule still holds. */
.tool--wrappable {
  white-space: normal;
}

.tools__note {
  margin-top: 30px;
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Section 6: Case Studies (teal section, white cards)
   -------------------------------------------------------------------------- */

.case-studies {
  background-color: var(--teal);
}

.case-studies .inner {
  max-width: 900px;
}

.case-studies h2 {
  margin-bottom: 60px;
  color: var(--white);
  text-align: center;
}

.cards {
  display: grid;
  gap: 60px;
}

.card {
  padding: 36px 40px 48px;
  border-top: var(--bar-thick) solid var(--card-color);
  background-color: var(--white);
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
  color: var(--black);
}

.card--orange {
  --card-color: var(--orange);
}

.card--turquoise {
  --card-color: var(--turquoise);
}

.card--yellow {
  --card-color: var(--yellow);
}

.card__title {
  margin-top: 0;
  margin-bottom: var(--space-s);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--black);
}

.card__context {
  font-weight: 700;
}

.card a {
  color: var(--teal);
}

/* The two link rows read as a pair. */
.card__link + .card__link {
  margin-top: 4px;
}

/* 30px above the bar, 12px between the bar and the outcome line. */
.card__outcome-bar {
  width: 32px;
  height: 14px;
  margin-top: 30px;
  margin-bottom: 12px;
  background-color: var(--card-color);
}

.card__outcome {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Section 7: Close (turquoise)
   -------------------------------------------------------------------------- */

.close {
  background-color: var(--turquoise);
}

.close .inner {
  max-width: var(--max-text);
  text-align: center;
}

.close h2 {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  color: var(--black);
}

.close p {
  margin-top: 20px;
  color: var(--black);
}

.close .cta {
  --cta-bar: var(--teal);
  --cta-bar-hover: var(--white);
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Footer (spec Section 8)
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--white);
  padding: 40px var(--gutter);
  text-align: center;
}

.site-footer p {
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

.site-footer a {
  color: var(--black);
}

.site-footer a:hover {
  color: var(--teal);
}

.site-footer .sep {
  padding: 0 0.25em;
}

/* ==========================================================================
   Part 3: responsive (spec Section 11)
   Desktop-first. Breakpoints 991px, 767px, 479px, matching open-lines.co.
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --fs-h2: 2rem;
    --fs-body: 1rem;
  }

  .inner {
    padding: 80px 40px;
  }

  .hero .inner {
    padding: 100px 40px 80px;
  }

  /* Decorative stripes drop away from tablet down. */
  .stripes {
    display: none;
  }

  .how-i-work .inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .inner {
    padding: 60px 2rem;
  }

  .hero .inner {
    padding: 60px 2rem;
  }

  /* Photo on top, text below, left-aligned. */
  .intro .inner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 40px;
  }

  .intro__photo {
    width: 100%;
    max-width: 421px;
  }

  .problems__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 479px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-accent: 1.5rem;
    --fs-h3: 1.375rem;
  }

  .inner {
    padding: 40px 2rem;
  }

  .hero .inner {
    padding: 40px 2rem 60px;
  }

  .site-header {
    padding: 15px 20px;
  }

  .site-header img {
    width: 150px;
  }

  /* Photo fills the container width. */
  .intro__photo {
    max-width: none;
  }

  .tools-list {
    font-size: 1.125rem;
  }

  .card {
    padding: 30px 24px 36px;
  }

  .card__title {
    font-size: 1.5rem;
  }

  /* The address may wrap; the whole link stays one tappable box. */
  .close .cta {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion (spec Section 7)
   This page has no animation or transitions at all; the rule is a guard so
   that nothing added later animates for users who opt out.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}