/* WYN Consultancy — site styles
   Colours and fonts match the original Squarespace site. Change them here and every page updates. */

:root {
  --red: #7f0201;
  --red-soft: #9c2b1d;      /* hero background shapes */
  --dark: #191a1a;
  --black: #0d0d0d;
  --off-white: #fafaf9;
  --peach: #ffcdaa;         /* fresh peach: cards, bands, pricing */
  --clay: #f2a07b;          /* deeper peach: top stripes */
  --line: rgba(13, 13, 13, 0.35);

  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Epilogue", system-ui, sans-serif;

  --gutter: clamp(20px, 4vw, 48px);
  --max: 1280px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
  background: var(--off-white);
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.center { text-align: center; }

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; overflow: hidden; }
.section--red { background: var(--red); color: var(--off-white); }
.section--dark { background: var(--dark); color: var(--off-white); }
.section--light { background: var(--off-white); color: var(--black); }

.rule { border: 0; border-top: 2px solid var(--red); margin: 0; }

/* Slow-moving background shapes (replaces Squarespace's animated canvas) */
.blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blobs span {
  position: absolute;
  border-radius: 50%;
  background: var(--red-soft);
  opacity: 0.55;
  animation: drift 26s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { width: 70vw; height: 70vw; left: -40vw; top: 15%; }
.blobs span:nth-child(2) { width: 60vw; height: 60vw; right: -35vw; top: -45%; animation-duration: 32s; animation-delay: -8s; opacity: 0.35; }
.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, -4vw) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .blobs span { animation: none; }
}

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  color: var(--off-white);
}
.page--light-header .site-header { color: var(--black); }

.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 88px;
}

.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-size: 16px; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }

.logo img { width: 40px; height: 40px; object-fit: cover; }

.social { display: flex; gap: 16px; justify-content: flex-end; }
.social a { display: inline-flex; }
.social svg { width: 20px; height: 20px; fill: currentColor; }

.menu-toggle {
  display: none;
  background: none; border: 0; padding: 8px; color: inherit; cursor: pointer;
  justify-self: end;
}
.menu-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; }

@media (max-width: 760px) {
  .site-header .wrap { grid-template-columns: auto 1fr auto; height: 72px; }
  .site-header .nav, .site-header .social { display: none; }
  .logo { grid-column: 1; }
  .menu-toggle { display: block; grid-column: 3; }

  .site-header.open { position: fixed; inset: 0; background: var(--red); color: var(--off-white); }
  .site-header.open .wrap { height: auto; padding-top: 16px; row-gap: 40px; grid-template-rows: 56px auto auto; }
  .site-header.open .nav { display: flex; flex-direction: column; grid-column: 1 / -1; grid-row: 2; gap: 18px; }
  .site-header.open .nav a { font-family: var(--font-display); text-transform: uppercase; font-size: 2.4rem; border: 0; }
  .site-header.open .social { display: flex; grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn--solid { background: var(--red); color: var(--off-white); }
.btn--solid:hover { background: #5e0100; }
.btn--outline-light { border-color: var(--off-white); color: var(--off-white); }
.btn--outline-light:hover { background: var(--off-white); color: var(--red); }
.btn--outline-red { border-color: var(--red); color: var(--red); }
.btn--outline-red:hover { background: var(--red); color: var(--off-white); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: var(--off-white);
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}
.hero--center { text-align: center; }
.hero--center p { max-width: 560px; margin: 0 auto 1.6em; }
.hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); }
.hero--left h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); margin-bottom: 1.2em; }

/* ---------- Home: Why WYN ---------- */

.why p.lead { max-width: 820px; margin: 0 auto 1em; }
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 900px;
  margin: 56px auto 0;
  text-align: center;
}
.pillars h3 { font-size: 1.15rem; }

/* ---------- Home: Services accordion ---------- */

.services-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.services-split h2 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.services-split .btn { margin-top: 24px; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-body); font-size: 1.4rem; font-weight: 300; transition: transform 0.2s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .panel { padding: 0 0 22px; }

/* ---------- Solutions ---------- */

.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin: 48px 0 56px;
}
.four-col h3 { font-size: 1.05rem; }

.teams {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 40px;
}
.teams h3 { text-align: center; font-size: 1.4rem; margin-bottom: 1em; }
.teams img { width: 100%; aspect-ratio: 3 / 4.6; object-fit: cover; border-radius: 28px; margin-bottom: 28px; }
.teams ul { padding-left: 1.1em; margin: 0; }
.teams li { margin-bottom: 0.8em; }

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  align-items: stretch;
}
.plan {
  background: var(--peach);
  border-top: 14px solid var(--clay);
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.plan--featured { outline: 3px solid var(--red); outline-offset: -3px; padding-top: 18px; }
.plan .tag { font-size: 13px; text-decoration: underline; margin-bottom: 14px; }
.plan h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); margin-bottom: 0.4em; }
.plan .price { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 1.4em; }
.plan ul { text-align: left; padding-left: 1.1em; margin: 0 0 32px; font-size: 15px; }
.plan ul.plain { list-style: none; padding-left: 0; }
.plan li { margin-bottom: 0.4em; }
.plan .btn { margin-top: auto; align-self: center; }

.newsletter p { max-width: 480px; margin: 0 auto 1.6em; }
.newsletter form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.newsletter input {
  font: inherit; font-size: 14px;
  padding: 14px 16px;
  width: min(320px, 100%);
  border: 0; border-radius: 0;
}
.newsletter button { background: #fff; color: var(--black); border-radius: 10px; }
.newsletter .note { font-size: 14px; margin-top: 1em; min-height: 1.5em; }

/* ---------- About ---------- */

.about { padding-top: 140px; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 8vw, 120px);
  align-items: center;
}
.about-grid .text { max-width: 440px; }
.about h1 { margin-bottom: 1.2em; }

/* ---------- News ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 48px;
}
.news-card { text-align: center; text-decoration: none; display: block; }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 28px; }
.news-card h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 0.5em; }
.news-card .more { font-size: 13px; text-decoration: underline; }

.post { max-width: 640px; margin: 0 auto; }
.post .meta { font-size: 13px; margin-bottom: 1.6em; }
.post h1 { margin-bottom: 1em; }
.post h2, .post h3 { margin-top: 1.6em; }
.post a { text-decoration: underline; }
.post figure { margin: 2em 0; }
.post figcaption { font-size: 13px; opacity: 0.7; margin-top: 8px; }
.post-back { display: inline-block; margin-top: 3em; font-size: 14px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--black); color: var(--off-white); padding: 56px 0; }
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: start;
}
.site-footer .tagline { font-family: var(--font-display); text-transform: uppercase; font-size: 1.35rem; line-height: 1.2; max-width: 300px; margin: 0; }
.site-footer .social { justify-content: center; }
.site-footer .sign-off { font-family: var(--font-display); text-transform: uppercase; font-size: 1.35rem; text-align: right; margin: 0; }
.site-footer small { display: block; grid-column: 1 / -1; font-size: 12px; opacity: 0.7; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .four-col { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 760px) {
  .pillars, .services-split, .teams, .about-grid, .news-grid, .four-col { grid-template-columns: 1fr; }
  .pillars { gap: 32px; }
  .teams img { aspect-ratio: 4 / 5; }
  .about { padding-top: 110px; }
  .site-footer .wrap { grid-template-columns: 1fr; text-align: left; }
  .site-footer .social { justify-content: flex-start; }
  .site-footer .sign-off { text-align: left; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================
   v2 additions: services, contact, FAQ, CTA band, footer
   ========================================================= */

.lead-lg { font-size: 1.15rem; max-width: 680px; }
.center .lead-lg { margin-left: auto; margin-right: auto; }
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1em; opacity: 0.8; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero--center .btn-row { justify-content: center; }
.btn--light { background: var(--off-white); color: var(--red); }
.btn--light:hover { background: #fff; }

/* Header CTA */
.header-right { display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.header-right .social { gap: 14px; }
.btn--nav { padding: 10px 18px; font-size: 13px; border-color: currentColor; color: inherit; }
.btn--nav:hover { background: var(--off-white); color: var(--red); border-color: var(--off-white); }
.page--light-header .btn--nav:hover { background: var(--red); color: var(--off-white); border-color: var(--red); }
.nav-cta-mobile { display: none; }
@media (max-width: 760px) {
  .header-right { display: none; }
  .site-header.open .nav-cta-mobile { display: inline-block; margin-top: 8px; font-family: var(--font-body); font-size: 14px; }
}

/* Two-up audience blocks */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.panel-card { background: #fff; padding: 36px 32px; border-top: 4px solid var(--red); }
.panel-card h3 { font-size: 1.5rem; }
.section--dark .panel-card { background: #222323; }

/* Service cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.svc-card {
  display: flex; flex-direction: column;
  background: var(--peach); color: var(--black);
  border-top: 14px solid var(--clay);
  padding: 36px 30px 32px; text-decoration: none;
  transition: transform 0.2s;
}
.svc-card:hover { transform: translateY(-4px); }
.svc-card h3 { font-size: 2.2rem; margin-bottom: 0.3em; }
.svc-card .one-line { font-size: 1.05rem; margin-bottom: 1.2em; }
.svc-card ul { padding-left: 1.1em; margin: 0 0 1.5em; font-size: 15px; }
.svc-card .from { margin-top: auto; font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; }
.svc-card .go { font-size: 13px; text-decoration: underline; margin-top: 6px; }

/* Founder block */
.founder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.founder img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.creds { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 1.4em 0 1.8em; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; opacity: 0.9; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { border-top: 2px solid currentColor; padding-top: 20px; }
.steps li::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-size: 2.6rem; display: block; line-height: 1; margin-bottom: 14px; color: var(--red); }
.section--red .steps li::before, .section--dark .steps li::before { color: var(--peach); }
.steps h3 { font-size: 1.2rem; }
.steps.four { grid-template-columns: repeat(4, 1fr); }

/* Feature list (what we build, etc.) */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px; }
.features h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
.features .price-tag { display: inline-block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--peach); color: var(--black); padding: 3px 10px; margin-bottom: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips li { border: 1px solid currentColor; border-radius: 999px; padding: 8px 16px; font-size: 14px; }

/* Price tables */
.price-block { margin-bottom: 56px; }
.price-block h2 a { text-decoration: none; }
.price-block h2 a:hover { text-decoration: underline; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table th, .price-table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; opacity: 0.7; }
.price-table td:first-child { font-weight: 700; width: 26%; }
.price-table td:nth-child(2) { white-space: nowrap; width: 18%; }
.small-print { font-size: 14px; opacity: 0.8; }

/* FAQ (reuses accordion) */
.faq { max-width: 820px; }
.faq.center-block { margin: 0 auto; }
.faq summary { font-family: var(--font-body); text-transform: none; font-size: 1.05rem; font-weight: 500; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.cta-band p { max-width: 520px; margin: 0 auto 1.8em; }

/* Insight cards row */
.insights-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.insights-row .news-card h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.insights-row .news-card img { margin-bottom: 18px; }

/* Article author box */
.author-box { display: flex; gap: 20px; align-items: center; border-top: 1px solid rgba(250,250,249,0.25); margin-top: 3em; padding-top: 2em; }
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.author-box p { margin: 0; font-size: 15px; }
.author-box strong { display: block; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.booking { background: #fff; min-height: 200px; padding: 32px; }
.booking iframe { width: 100%; height: 680px; border: 0; }
.form-grid { display: grid; gap: 16px; }
.form-grid label { display: block; font-size: 14px; margin-bottom: 6px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 13px 14px;
  border: 1px solid rgba(13,13,13,0.25); background: #fff; border-radius: 0; color: var(--black);
}
.form-grid textarea { min-height: 140px; resize: vertical; }
.form-grid .btn { justify-self: start; }

/* Footer v2 */
.site-footer { padding: 72px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; }
.footer-grid h4 { font-size: 1rem; margin-bottom: 1em; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer .newsletter form { justify-content: flex-start; flex-wrap: nowrap; }
.site-footer .newsletter input { width: 100%; min-width: 0; }
.site-footer .newsletter p { margin: 0 0 1em; max-width: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(250,250,249,0.25); margin-top: 48px; padding-top: 24px; font-size: 13px; }
.footer-bottom .social { justify-content: flex-start; }

@media (max-width: 960px) {
  .cards-3, .insights-row { grid-template-columns: 1fr; max-width: 520px; }
  .steps.four { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .split-2, .founder, .steps, .steps.four, .features, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .price-table thead { display: none; }
  .price-table tr { display: block; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .price-table td { display: block; border: 0; padding: 2px 0; width: auto !important; white-space: normal !important; }
  .site-footer .newsletter form { flex-wrap: wrap; }
}

.site-footer .wrap { display: block; }
.newsletter button { white-space: nowrap; }
.contact-grid h2 { font-size: 1.6rem; }

/* =========================================================
   Services overview: jump links + one coloured band per service
   ========================================================= */

.hero--services { min-height: 0; padding: 150px 0 72px; }
.hero--services h1 { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 0.4em; }

.jump {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.jump a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(250, 250, 249, 0.45);
  transition: box-shadow 300ms var(--ease-out);
}
.jump a:hover, .jump a:focus-visible { box-shadow: inset 0 3px 0 var(--off-white); }
.jump-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; }
.jump-meta { font-size: 15px; opacity: 0.85; max-width: 30ch; }
.jump-price { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; color: var(--peach); margin-top: 4px; }

.svc-band { padding: clamp(80px, 10vw, 140px) 0; scroll-margin-top: 40px; }
.svc-band--light { background: var(--off-white); color: var(--black); }
.svc-band--dark { background: var(--dark); color: var(--off-white); }
.svc-band--peach { background: var(--peach); color: var(--black); }

.svc-band-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.svc-band-intro { position: sticky; top: 110px; }
.svc-band-intro h2 {
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 0.25em;
}
.svc-band-line { font-size: 1.15rem; max-width: 26ch; margin-bottom: 0.8em; }
.svc-band-start {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--red);
  margin-bottom: 1.4em;
}
.svc-band--dark .svc-band-start { color: var(--peach); }

.offer-list { list-style: none; padding: 0; margin: 0; }
.offer { padding: 28px 0 24px; border-top: 1px solid var(--line); }
.offer:last-child { border-bottom: 1px solid var(--line); }
.svc-band--dark .offer { border-color: rgba(250, 250, 249, 0.2); }
.offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 8px; }
.offer h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; }
.offer-price {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  white-space: nowrap;
  color: var(--red);
}
.svc-band--dark .offer-price { color: var(--peach); }
.offer p { margin: 0; max-width: 54ch; opacity: 0.85; }

.faq-rule { margin: 56px 0 72px; }

@media (max-width: 860px) {
  .svc-band-grid { grid-template-columns: 1fr; }
  .svc-band-intro { position: static; }
  .jump { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
}
@media (max-width: 480px) {
  .offer-top { flex-direction: column; gap: 4px; }
}

/* =========================================================
   Motion: page transitions, sticky header, scroll reveals
   Easing: fast start, long soft settle (no overshoot).
   Everything is off for visitors with reduced motion turned on.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Press feedback, instant on pointer-down */
.btn, .svc-card, .news-card { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(0.97); transition: transform 100ms ease-out; }

/* Sticky header: transparent at the top, translucent once you scroll */
.site-header {
  position: fixed;
  transition: background-color 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease;
}
.site-header.scrolled {
  background: rgba(127, 2, 1, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(250, 250, 249, 0.08);
  color: var(--off-white);
}
.page--light-header .site-header.scrolled {
  background: rgba(250, 250, 249, 0.8);
  color: var(--black);
  box-shadow: 0 1px 0 rgba(13, 13, 13, 0.08);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.scrolled { background: var(--red); backdrop-filter: none; }
  .page--light-header .site-header.scrolled { background: var(--off-white); }
}

/* Image hover on article cards */
.news-card .img-wrap { overflow: hidden; margin-bottom: 28px; }
.insights-row .news-card .img-wrap { margin-bottom: 18px; }
.news-card .img-wrap img { margin: 0; transition: transform 900ms var(--ease-out); }
.news-card:hover .img-wrap img { transform: scale(1.04); }

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

  /* Page change: the current page fades out quickly, the next one fades in.
     The header stays put so the site feels continuous. */
  html.wyn-leave main, html.wyn-leave .site-footer {
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.wyn-enter main { animation: page-in 600ms cubic-bezier(0.25, 0.1, 0.25, 1) both; }
  @keyframes page-in { from { opacity: 0; } }

  /* Opening content rises in on arrival */
  .hero .wrap > *, .about .text > *, .about-grid > img, .section-head > h1, .section-head > h1 ~ * {
    animation: rise 900ms var(--ease-out) both;
    animation-delay: calc(var(--enter, 0ms) + var(--d, 0ms));
  }
  html.wyn-enter { --enter: 120ms; }
  .hero .wrap > :nth-child(2), .about .text > :nth-child(2), .section-head > h1 ~ * { --d: 70ms; }
  .hero .wrap > :nth-child(3), .about .text > :nth-child(3) { --d: 140ms; }
  .hero .wrap > :nth-child(4), .about .text > :nth-child(4) { --d: 210ms; }
  .hero .wrap > :nth-child(n+5), .about .text > :nth-child(n+5), .about-grid > img { --d: 260ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  }

  /* Lists settle into place as they scroll in (classes added by main.js) */
  .js .reveal {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(6px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js .reveal.in { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 760px) {
  .site-header.open { background: var(--red) !important; color: var(--off-white) !important; backdrop-filter: none; }
}

/* =========================================================
   Cookie banner, booking embed, legal page
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;
  width: min(440px, calc(100vw - 40px));
  background: var(--off-white);
  color: var(--black);
  padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(13, 13, 13, 0.28), 0 2px 8px rgba(13, 13, 13, 0.12);
  border-top: 6px solid var(--red);
  font-size: 14px;
  animation: banner-in 500ms var(--ease-out) both;
}
@keyframes banner-in { from { opacity: 0; transform: translateY(16px); } }
.cookie-banner h2 { font-size: 1.3rem; margin-bottom: 0.4em; }
.cookie-banner p { margin-bottom: 1.1em; }
.cookie-banner a { text-decoration: underline; }
.cookie-options { display: grid; gap: 12px; margin-bottom: 1.2em; }
.cookie-options[hidden] { display: none; }
.cookie-options label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookie-options input { margin-top: 3px; accent-color: var(--red); width: 16px; height: 16px; }
.cookie-options strong { display: block; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cookie-actions .btn { padding: 11px 18px; font-size: 13px; }
.cookie-manage { background: none; border: 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 8px; color: inherit; }
@media (max-width: 480px) {
  .cookie-banner { left: 10px; bottom: 10px; width: calc(100vw - 20px); padding: 22px 20px 18px; }
}

.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; margin-left: 16px; }
.footer-legal a, .footer-legal button { color: inherit; font: inherit; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.footer-legal a:hover, .footer-legal button:hover { text-decoration: underline; }
@media (max-width: 760px) { .footer-legal { margin: 8px 0 0; display: flex; } }

.booking--live { padding: 32px 24px 16px; }
#cal-inline { width: 100%; min-height: 560px; margin: 8px 0 4px; overflow: auto; }

.legal { max-width: 720px; }
.legal h2 { font-size: 1.5rem; margin-top: 2em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1em 0 1.5em; }
.legal th, .legal td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.legal a { text-decoration: underline; }
.contact-grid .booking--live { grid-column: 1 / -1; }
.contact-grid .booking--live ~ form { max-width: 640px; }

/* =========================================================
   Bands everywhere: shared by every page (see Services)
   ========================================================= */
.band-body > .accordion { border-top-color: var(--line); }
.svc-band--dark .accordion,
.svc-band--dark .accordion details { border-color: rgba(250, 250, 249, 0.2); }
.svc-band--peach .accordion,
.svc-band--peach .accordion details { border-color: rgba(13, 13, 13, 0.25); }
.band-body .faq { max-width: none; }
.band-body > p.center { text-align: left; margin-top: 28px; }
.band-body > p.center a { text-decoration: underline; }
.band-body .chips { margin-top: 6px; }
.svc-band-line { opacity: 0.85; }

/* Display-size page titles, matching the band headings */
.about h1, .section-head > h1 {
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.svc-band-intro--long h2 { font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 0.98; }

/* =========================================================
   Home: Advise / Train / Build as stacked rows
   ========================================================= */
.srows { border-top: 1px solid var(--line); }
.srow {
  display: grid;
  grid-template-columns: 3.2fr 4fr 2fr;
  gap: 32px;
  align-items: center;
  padding: 34px 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--black);
  transition: background-color 350ms var(--ease-out), color 350ms var(--ease-out);
}
.srow h3 { font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.9; margin: 0; }
.srow-mid p { margin: 0 0 0.4em; font-size: 1.05rem; }
.srow-mid small { font-size: 14px; opacity: 0.75; }
.srow-end { text-align: right; }
.srow .from { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; color: var(--red); margin-bottom: 6px; transition: color 350ms var(--ease-out); }
.srow .go { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.srow-arrow { width: 18px; height: 18px; vertical-align: -4px; margin-left: 6px; transition: transform 350ms var(--ease-out); }
.srow:hover, .srow:focus-visible { background: var(--red); color: var(--off-white); }
.srow:hover .from, .srow:focus-visible .from { color: var(--peach); }
.srow:hover .srow-arrow, .srow:focus-visible .srow-arrow { transform: translateX(4px); }
@media (max-width: 860px) {
  .srow { grid-template-columns: 1fr; gap: 10px; padding: 28px 16px; }
  .srow-end { text-align: left; display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
  .srow .from { margin: 0; }
}

/* =========================================================
   Critique fixes (Oct 2026)
   ========================================================= */

/* Logo: the white WYN lettering, coloured by the header (off-white or black) */
.logo { display: inline-flex; }
.logo-mark {
  display: block;
  width: 88px;
  aspect-ratio: 545 / 177;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/wyn-wordmark.png") center / contain no-repeat;
  mask: url("/assets/img/wyn-wordmark.png") center / contain no-repeat;
}

/* Mobile: keep "Book a call" visible next to the menu button */
@media (max-width: 760px) {
  .logo-mark { width: 74px; }
  .site-header .wrap { grid-template-columns: auto 1fr auto auto; column-gap: 12px; }
  .header-right { display: flex; grid-column: 3; }
  .header-right .social { display: none; }
  .btn--nav { padding: 9px 14px; font-size: 12px; }
  .menu-toggle { grid-column: 4; }
  .site-header.open .header-right { display: none; }
}

/* Hero proof line */
.hero-proof { margin-top: 48px; }
.hero-proof p { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin: 0 0 12px; max-width: none; }
.hero-proof ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.hero-proof li { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.01em; }

/* Background motif: the top of the Y in the WYN logo, cut at the tip of its inner V (vector).
   It spans the full height of the section, so the inner V ends exactly on the section's bottom edge. */
.blobs span:nth-child(1) {
  display: block;
  border-radius: 0;
  left: auto;
  width: auto;
  height: 100%;
  aspect-ratio: 158 / 78;
  top: 0;
  right: -22%;
  opacity: 0.5;
  background: var(--red-soft);
  -webkit-mask: url("/assets/img/wyn-v.svg") top / 100% 100% no-repeat;
  mask: url("/assets/img/wyn-v.svg") top / 100% 100% no-repeat;
  transform-origin: 50% 50%;
  animation: v-drift 24s ease-in-out infinite alternate;
}
.blobs span:nth-child(2) { display: none; }
@keyframes v-drift {
  /* Proportional resize from the centre (like Option+Shift in a design tool) while drifting sideways:
     grows to 130% as it slides, then returns to rest, where the V's tip sits on the section edge */
  from { transform: translateX(0) scale(1); }
  to   { transform: translateX(-5vw) scale(1.3); }
}
@media (max-width: 760px) {
  .blobs span:nth-child(1) { right: -90%; opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .blobs span:nth-child(n) { animation: none; }
}

/* Reading size: a touch larger on desktop, articles larger still */
@media (min-width: 900px) {
  body { font-size: 17px; }
  .post { font-size: 18px; line-height: 1.7; }
}

/* Insights cards align left, like the rest of the site */
.news-card { text-align: left; }

/* Keyboard focus that shows on every background */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero :focus-visible, .section--red :focus-visible, .section--dark :focus-visible,
.svc-band--dark :focus-visible, .site-footer :focus-visible, .site-header :focus-visible { outline-color: var(--peach); }
.page--light-header .site-header :focus-visible { outline-color: var(--red); }
.srow:focus-visible { outline-offset: -3px; }
@media (max-width: 760px) {
  .site-header.open .nav a.nav-cta-mobile {
    font-family: var(--font-body); text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em;
    padding: 14px 24px; border: 1px solid var(--off-white); align-self: flex-start; margin-top: 12px;
  }
}