/* Lynofuro — shared design system. Fonts verified from the live site's real
   stylesheet: headings use Clarkson (Adobe Typekit, licensed to Lynn's own
   account — substituted here with Jost, a free geometric sans with a similar
   feel, until the real Adobe Fonts kit is available). Body text uses
   Newsreader, a real open Google Font, matched exactly. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* Real colors sampled directly from the live lynofuro.co.nz render
     (Squarespace resolves these client-side via JS, no static CSS source
     existed to read, so these were pixel-sampled from a real screenshot). */
  --bg: #F6F2EC;
  --bg-soft: #C7D4CC;
  --text: #2B2B28;
  --text-soft: rgba(43,43,40,0.65);
  --accent: #8B7355;
  --accent-soft: #A8927D;
  --sage: #8B9A7D;
  --forest: #333E38;
  --forest-dark: #2E3D34;
  --near-black: #0A0A08;
  --border: rgba(43,43,40,0.1);
  --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Jost', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 300;
}

h1, h2, h3 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  line-height: 1.2;
}

h1 { font-size: 48px; }
h2 { font-size: 34px; }
h3 { font-size: 24px; }

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

/* Visible keyboard focus states, WCAG 2.2 Focus Appearance — applied to every
   interactive element site-wide. Dark-section variant keeps contrast on
   theme-black/theme-bright/hero backgrounds. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-glass:focus-visible,
.btn-solid:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero a:focus-visible,
.theme-black a:focus-visible,
.theme-bright a:focus-visible,
header a:focus-visible,
footer a:focus-visible {
  outline-color: #fff;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Announcement bar — real thin strip above the header on the live site */
.announcement-bar {
  background: var(--forest);
  color: var(--bg);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 9px 32px;
  position: relative;
}
.announcement-bar .close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
}

/* Header — real dark forest-green header (sampled from the live site,
   not the frosted-glass-on-cream guess used before real colors existed) */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: linear-gradient(180deg, var(--forest) 0%, rgba(51,62,56,0.92) 100%);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 84px;
  width: auto;
  display: block;
}
@media (max-width: 600px) { .logo img { height: 56px; } }

nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

nav a {
  transition: opacity 0.2s;
  padding: 8px 2px;
  display: inline-block;
  color: #fff;
}
nav a:hover { opacity: 0.75; }

.cart-icon { font-size: 16px; opacity: 0.85; }

/* Hero — editorial: copy left, framed portrait right */
.hero {
  position: relative;
  width: 100%;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  overflow: visible;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 52%, #EFE7DA 100%);
  color: var(--text);
  padding: 120px 32px 0;
  margin: 0;
}
.hero-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.hero-copy {
  flex: 1 1 auto;
  max-width: 600px;
  text-align: left;
  padding-bottom: 84px;
}
.hero { position: relative; z-index: 2; }
.method-band { position: relative; z-index: 1; }

.hero-portrait {
  position: absolute;
  right: max(-8px, calc((100vw - 1180px) / 2 - 28px));
  bottom: 0;                          /* base sits flush on the Method band, not over it */
  height: min(100%, 640px);          /* fills the hero; capped so her head clears the top */
  width: auto;
  max-width: 56vw;
  z-index: 3;
}
.hero-copy { max-width: 48%; }
/* subtle oval amber glow behind the cut-out figure */
.hero-portrait::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(233,180,132,0.42) 0%,
    rgba(212,142,94,0.20) 40%,
    rgba(190,120,80,0) 70%);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}
.hero-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
}

.hero h1 {
  color: var(--forest);
  margin: 0 0 20px;
  font-size: clamp(28px, 5vw, 46px);
}
.hero-copy p {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
  color: var(--text-soft);
}

@media (max-width: 860px) {
  .hero { align-items: center; padding: 84px 20px 0; min-height: auto; }
  .hero-inner { flex-direction: column-reverse; align-items: center; gap: 0; }
  .hero-copy { text-align: center; padding-bottom: 28px; max-width: 100%; }
  .hero-copy p { margin: 0 auto; }
  .hero-portrait {
    position: static;
    height: auto;
    width: min(78vw, 360px);
    max-width: none;
    margin: 0 auto 24px;       /* portrait fully above the copy, clear gap */
    z-index: 1;
  }
  .hero-copy { position: relative; z-index: 2; }
  .hero-portrait img { height: auto; width: 100%; }
  .hero-portrait::before { top: 48%; height: 96%; }
}
@media (max-width: 640px) {
  .hero-copy p { font-size: 15px; }
}

/* Sections */
section {
  padding: 80px 32px;
  text-align: center;
}

.section-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-label::after { content: " \2192"; }

/* One unified button: glassmorphic forest green at 20% opacity.
   Dark sections (hero / theme-dark / theme-black) flip to a light glass
   so the label stays legible. */
.btn, .btn-solid, .btn-glass {
  display: inline-block;
  padding: 16px 34px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50px;
  background-color: rgba(51,62,56,.16);
  background-image: linear-gradient(158deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 52%, rgba(51,62,56,.10) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 26px rgba(43,43,40,.12), inset 0 1px 0 rgba(255,255,255,.6);
  color: var(--forest);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(.16,.72,.24,1), box-shadow 0.3s ease, background-color 0.2s ease;
  margin: 8px;
  cursor: pointer;
}
.btn:hover, .btn-solid:hover, .btn-glass:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 34px rgba(43,43,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
/* grows a touch as it scrolls into view */
.btn.reveal, .btn-solid.reveal, .btn-glass.reveal { opacity: 0.001; transform: scale(0.9); }
.btn.revealed, .btn-solid.revealed, .btn-glass.revealed {
  opacity: 1; transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.16,.72,.24,1);
}
.theme-dark .btn, .theme-dark .btn-solid, .theme-dark .btn-glass,
.theme-black .btn, .theme-black .btn-solid, .theme-black .btn-glass {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background-color: rgba(255,255,255,.2);
}
.theme-dark .btn:hover, .theme-dark .btn-solid:hover, .theme-dark .btn-glass:hover,
.theme-black .btn:hover, .theme-black .btn-solid:hover, .theme-black .btn-glass:hover {
  background-color: rgba(255,255,255,.3);
}

/* legacy .btn-glass extras kept for the wide-letterspacing hero look */
.btn-glass {
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
  text-align: center;
  box-shadow: 0 4px 50px rgba(0,0,0,.1);
  margin: 8px;
}
.btn-glass:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* Section theme utilities — corrected against real pixel-sampled colors
   from a live screenshot (2026-08-26). "This work is for you if" and the
   About preview section are NOT dark/brown blocks on the real site, they
   share the same light cream background as everything else, just with an
   inset photo — the earlier black/brown guesses were wrong. */
.theme-black { background: var(--near-black); color: rgba(255,255,255,.92); }
.theme-black h1, .theme-black h2, .theme-black h3 { color: #fff; }
.theme-black .section-label { color: rgba(255,255,255,.6); }
.theme-black p { color: rgba(255,255,255,.75); }
.theme-black .fit-list li { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.15); }

.theme-dark { background: var(--forest); color: rgba(255,255,255,.92); }
.theme-dark h1, .theme-dark h2, .theme-dark h3 { color: #fff; }
.theme-dark .section-label { color: rgba(255,255,255,.6); }

/* Three column */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 40px auto 0;
  text-align: left;
}
@media (max-width: 800px) { .three-col { grid-template-columns: 1fr; } }

.col-card {
  background: var(--white);
  padding: 0 0 32px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.col-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  margin-bottom: 20px;
}
.col-card-eyebrow {
  font-size: 12px;
  font-style: italic;
  color: var(--accent);
  padding: 0 32px;
  margin-bottom: 6px;
}
.col-card h3 { margin-bottom: 12px; padding: 0 32px; }
.col-card p { color: var(--text-soft); margin-bottom: 20px; font-size: 15px; padding: 0 32px; }
.col-card .read-more { padding: 0 32px; display: inline-block; }

/* Bullet fit list */
.fit-list {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: left;
  list-style: none;
}
.fit-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  padding-left: 28px;
  position: relative;
}
.fit-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Alignment challenges — carousel */
.carousel {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
}
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.challenge-card {
  background: var(--bg-soft);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  scroll-snap-align: start;
  border-radius: 4px;
}
.challenge-card .prompt { font-size: 15px; margin-bottom: 16px; }
.challenge-card .cta {
  align-self: center;
  margin-top: auto;
  padding: 9px 22px;
  border: 1px solid currentColor;
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.challenge-card .cta:not([style*="color"]) { color: var(--accent); }

.carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, opacity 0.25s;
  opacity: 0.9;
}
.carousel-arrow:hover { background: var(--accent); color: #fff; }
.carousel-arrow[disabled] { opacity: 0.25; cursor: default; }
.carousel-arrow[disabled]:hover { background: var(--white); color: var(--text); }
.carousel-arrow-prev { left: -20px; }
.carousel-arrow-next { right: -20px; }
@media (max-width: 700px) {
  .carousel-arrow { display: none; }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.carousel-dots button.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Three step process */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 40px auto 0;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step-card { text-align: left; }
.step-image {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 16px;
  display: block;
}
.step-num {
  font-family: 'Newsreader', serif;
  font-size: 32px;
  color: var(--accent-soft);
}

/* Testimonials */
.testimonials {
  background: var(--bg-soft);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 40px auto 0;
  text-align: left;
}
@media (max-width: 700px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--white);
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(43,43,40,0.06);
}
.testimonial-card p.quote { font-style: italic; margin-bottom: 16px; font-size: 15px; color: var(--text); }
.testimonial-card .attribution { font-size: 13px; color: var(--text-soft); }
.theme-black .testimonial-card .quote, .theme-dark .testimonial-card .quote { color: var(--text); }

/* Footer — real forest-dark green sampled from the live site */
footer {
  padding: 48px 32px 32px;
  text-align: center;
  background: var(--forest-dark);
  color: rgba(255,255,255,.92);
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}
.social-icons a { padding: 8px 4px; display: inline-block; }
.copyright { font-size: 12px; color: var(--text-soft); }

/* Blog */
.blog-card {
  max-width: 700px;
  margin: 40px auto 0;
  text-align: left;
  border: 1px solid var(--border);
  padding: 32px;
}
.blog-date { font-size: 12px; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.blog-card h3 { margin-bottom: 12px; }
.blog-card p { color: var(--text-soft); margin-bottom: 16px; }
.read-more { font-size: 13px; color: var(--accent); font-weight: 500; }

/* Generic content page */
.page-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
  padding: 60px 32px 100px;
}
.page-content h1 { margin-bottom: 24px; text-align: left; }
.page-content p { margin-bottom: 18px; color: var(--text-soft); }
.page-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 2px;
  margin: 32px 0;
  display: block;
}

/* Side-by-side section — image one side, text the other, matching the real
   site's layout for "This work is for you if" and the About preview */
.side-by-side {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.side-by-side.reverse { flex-direction: row-reverse; }
.side-by-side .sbs-image {
  flex: 0 0 42%;
}
.side-by-side .sbs-image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.side-by-side .sbs-content { flex: 1; }
@media (max-width: 800px) {
  .side-by-side { flex-direction: column; gap: 32px; }
  .side-by-side .sbs-image { flex: 0 0 auto; width: 100%; max-width: 400px; }
}

.blog-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 16px;
  display: block;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 40px auto 0;
  text-align: left;
}
.blog-grid .blog-card { margin: 0; }

.as-seen-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.as-seen-logos img { height: 40px; width: auto; opacity: 0.75; }

.social-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 800px;
  margin: 32px auto 0;
}
@media (max-width: 700px) { .social-photo-grid { grid-template-columns: repeat(2, 1fr); } }
.social-photo-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 2px;
}

/* Scroll reveal — soft, slow, no bounce */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* About page hero row — label/h1 left, circular photo right, matching the
   real site's layout */
.about-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
}
.about-hero-image {
  width: 340px;
  height: 340px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 750px) {
  .about-hero-row { flex-direction: column; align-items: center; text-align: center; }
  .about-hero-image { width: 260px; height: 260px; }
}

/* Services / offer cards */
.service-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 750px) { .service-offer-grid { grid-template-columns: 1fr; } }
.service-offer-card {
  background: var(--white);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  border: 1px solid var(--border);
}
.service-offer-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 20px;
}
.service-offer-card h3 { font-size: 22px; margin-bottom: 12px; }
.service-offer-fit { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 8px; }
.service-offer-card p { color: var(--text-soft); font-size: 14px; margin-bottom: 16px; }

/* Marquee strip — real scrolling text band from workplace-wellness page */
.marquee-strip {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: var(--bg);
}
.marquee-strip span {
  display: inline-block;
  font-family: 'Newsreader', serif;
  font-size: 22px;
  color: var(--text-soft);
}

/* Contact form */
.contact-form { max-width: 480px; }
.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}
.contact-form label em, .form-label-small em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-soft);
  font-size: 13px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-label-small {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.form-hint {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  background: var(--white);
  color: var(--text);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.contact-form textarea { resize: vertical; }

.contact-email {
  font-size: 22px;
  color: var(--accent);
  margin: 24px 0;
  display: inline-block;
}

.footer-logo { display: inline-block; margin-bottom: 22px; }
.footer-logo img { height: 54px; width: auto; opacity: 0.9; }

/* Footer social icons */
.social-icons a { padding: 8px; display: inline-flex; opacity: 0.8; transition: opacity .2s; }
.social-icons a:hover { opacity: 1; }
.social-icons svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* Subscribe popup */
.sub-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(20,24,22,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.sub-overlay.open { opacity: 1; pointer-events: auto; }
.sub-modal {
  position: relative; background: var(--bg); color: var(--text);
  max-width: 460px; width: 100%; border-radius: 8px;
  padding: 40px 36px 32px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  transform: translateY(12px); transition: transform .3s ease;
}
.sub-overlay.open .sub-modal { transform: translateY(0); }
.sub-modal .sub-close {
  position: absolute; top: 12px; right: 16px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--text-soft); cursor: pointer;
}
.sub-modal .section-label { margin-bottom: 12px; }
.sub-modal .section-label::after { content: ""; }
.sub-modal h3 { margin: 0 0 10px; }
.sub-modal p { color: var(--text-soft); font-size: 15px; margin: 0 auto 20px; max-width: 340px; }
.sub-modal iframe { width: 100%; max-width: 340px; border: 0; background: transparent; }
@media (max-width: 480px) { .sub-modal { padding: 36px 22px 26px; } }