:root {
  --paper:      #F6F1E6;
  --paper-card: #FFFCF4;
  --ink:        #221D15;
  --terracotta: #B4502E;
  --green:      #2F4A3A;
  --faded:      #7A6F5E;
  --hairline:   #DED5C0;
  --gold:       #C8A24A;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Section colour themes (each section sets its own palette) */
.s-paper { --bg: #F6F1E6; --text: #221D15; --muted: #7A6F5E; --eyebrow: #B4502E; --panel: linear-gradient(150deg, #EAD9C6, #E7C9B6); }
.s-warm  { --bg: #F4E3D6; --text: #2A1C12; --muted: #8A6A54; --eyebrow: #B4502E; --panel: linear-gradient(150deg, #E9C7B2, #DCA888); }
.s-sage  { --bg: #E7EEE6; --text: #1E2A20; --muted: #5C6E5E; --eyebrow: #2F4A3A; --panel: linear-gradient(150deg, #CFE0CD, #AECBAB); }
.s-gold  { --bg: #F4EBD2; --text: #2A2412; --muted: #857343; --eyebrow: #9A7B2E; --panel: linear-gradient(150deg, #ECD7A2, #E0C079); }
.s-dark  { --bg: #2F4A3A; --text: #F6F1E6; --muted: #C3D1C2; --eyebrow: #E2B36A; --panel: linear-gradient(150deg, #3C5A48, #284033); }
.s-terra { --bg: #B4502E; --text: #FFF6EE; --muted: #F3D8C8; --eyebrow: #FBE9C9; --panel: none; }

.topstripe {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--terracotta), var(--gold) 50%, var(--green));
}

/* Header */
.site-header {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 50;
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px clamp(20px, 5vw, 64px);
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header.scrolled {
  background: rgba(246, 241, 230, 0.82);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 1px 0 var(--hairline);
}
.wordmark {
  font-family: var(--serif); font-weight: 600; font-size: 26px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.wordmark.small { font-size: 22px; color: var(--paper); }
.header-tag {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
}

/* Shared layout */
/* Full-bleed coloured backgrounds; content centred to --maxw via padding. */
section {
  padding-block: clamp(76px, 13vh, 150px);
  padding-inline: max(20px, calc((100% - var(--maxw, 1140px)) / 2));
  background: var(--bg, var(--paper));
  color: var(--text, var(--ink));
}
.eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--eyebrow, var(--terracotta)); font-weight: 600; margin: 0 0 18px;
}
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.04; color: var(--text, var(--ink)); margin: 0; }
h1 { font-size: clamp(40px, 7.5vw, 76px); }
h2 { font-size: clamp(32px, 5vw, 54px); }
p  { margin: 0; }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(24px, 5vw, 72px);
  --maxw: 1240px;
}
.hero-glow {
  position: absolute; z-index: 0; right: 4%; top: 14%; width: 60%; height: 70%;
  background: radial-gradient(closest-side, rgba(180,80,46,0.30), rgba(200,162,74,0.16) 55%, transparent 75%);
  filter: blur(10px); pointer-events: none;
}
.hero-copy { max-width: 560px; position: relative; z-index: 2; }
.hero-copy h1 { margin-bottom: 22px; }
.lede { font-size: clamp(18px, 2.1vw, 22px); color: var(--muted, var(--faded)); max-width: 30em; }
.lede.center { margin: 0 auto; }
.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.cta-note { font-size: 14px; color: var(--muted, var(--faded)); letter-spacing: 0.04em; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary { background: var(--green); color: var(--paper); box-shadow: 0 14px 30px -12px rgba(47,74,58,0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(47,74,58,0.7); }
.btn-light { background: var(--paper); color: var(--terracotta); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(0,0,0,0.45); }
.btn.big { padding: 17px 38px; font-size: 17px; margin-top: 30px; }

/* Hero art: two phones */
.hero-art { position: relative; z-index: 1; height: clamp(440px, 64vh, 720px); display: flex; align-items: center; justify-content: center; }
.hero-art .phone-front { position: relative; z-index: 2; width: clamp(220px, 24vw, 300px); transform: translateX(6%) rotate(1.5deg); }
.hero-art .phone-back  { position: absolute; z-index: 1; width: clamp(190px, 21vw, 264px); transform: translateX(-44%) translateY(-6%) rotate(-5deg); opacity: 0.97; }

/* Feature sections */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 90px);
  --maxw: 1140px;
}
.feature.reverse .feature-text { order: 2; }
.feature.reverse .feature-art  { order: 1; }
.feature-text { max-width: 30em; }
.feature-text h2 { margin-bottom: 20px; }
.feature-text p { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted, var(--faded)); }
.feature-art { display: flex; justify-content: center; }

/* Coloured panel behind each phone */
.media { position: relative; display: inline-block; padding: clamp(22px, 4vw, 46px); }
.media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--panel); border-radius: 36px;
  box-shadow: 0 30px 70px -34px rgba(34,29,21,0.5);
}
.media .phone { position: relative; z-index: 1; }

/* Phone frame */
.phone {
  border: 9px solid var(--ink);
  border-radius: 46px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 50px 90px -30px rgba(34,29,21,0.45), 0 12px 28px -16px rgba(34,29,21,0.35);
  width: clamp(230px, 26vw, 312px);
}
.phone img { display: block; width: 100%; height: auto; }

/* iPad / iPhone-and-iPad section */
.ipad-section {
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(28px, 6vw, 80px);
  --maxw: 1180px;
}
.ipad-copy { max-width: 28em; }
.ipad-copy h2 { margin-bottom: 20px; }
.ipad-copy p { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted, var(--faded)); }
.ipad-art { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.tablet {
  border: 12px solid var(--ink); border-radius: 30px; overflow: hidden; background: var(--ink);
  width: clamp(340px, 50vw, 640px);
  box-shadow: 0 50px 100px -34px rgba(34,29,21,0.5);
}
.tablet img { display: block; width: 100%; height: auto; }
.ipad-art .phone-inset {
  position: absolute; right: -2%; bottom: -6%; z-index: 3;
  width: clamp(110px, 15vw, 168px); border-width: 7px; border-radius: 32px;
}

/* Closing */
.closing { --maxw: 760px; text-align: center; }
.closing h2 { margin-bottom: 18px; }

/* Footer */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding: 48px clamp(20px, 5vw, 64px) 60px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.site-footer .fine { font-size: 13px; color: #BDB2A0; max-width: 46em; }
.site-footer .copy { font-size: 13px; color: #8F8676; }

/* Scroll reveal */
.reveal, .reveal-phone {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-phone { transform: translateY(40px) scale(0.97); }
.reveal.in, .reveal-phone.in { opacity: 1; transform: none; }
.reveal-phone.in { transition-delay: .12s; }

/* Responsive */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 120px; gap: 36px; }
  .hero-copy { margin: 0 auto; }
  .cta-row { justify-content: center; }
  .hero-glow { width: 90%; right: 5%; top: 8%; }
  .hero-art { height: 540px; }
  .hero-art .phone-front { transform: rotate(1.5deg); width: clamp(230px, 60vw, 290px); }
  .hero-art .phone-back  { transform: translateX(-58%) translateY(-3%) rotate(-6deg); width: clamp(200px, 52vw, 250px); opacity: .85; }
  .feature, .ipad-section { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .feature.reverse .feature-text, .feature.reverse .feature-art { order: initial; }
  .feature-text, .ipad-copy { margin: 0 auto; }
  .tablet { width: min(86vw, 460px); }
  .ipad-art .phone-inset { right: 4%; bottom: -5%; width: clamp(96px, 26vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-phone { opacity: 1 !important; transform: none !important; transition: none; }
  .btn, .header-cta { transition: none; }
}