/* ==========================================================================
   Show Up — styles
   All sizes in rem (1rem = 16px at default browser settings).
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --paper:         #FBFAF6;
  --paper-2:       #F1EFE8;
  --line:          #E0DDD3;
  --ink:           #010202;
  --ink-soft:      #3C4746;
  --muted:         #414947;
  --brand:         #0E5A50;
  --brand-deep:    #0A463E;
  --brand-soft:    #E4EEEA;
  --brand-tint:    #D6E6DF;
  --brand-mist:    #EAF1ED;
  --signal:        #EFA52E;
  --signal-deep:   #C9821A;
  --signal-ink:    #A0650F;
  --amber-tint:    #F3E2C4;
  --amber-soft:    #F7EDDC;
  --amber-mist:    #FAF3E7;
  --night:         #10292A;
  --night-2:       #173A38;
  --on-night:      #EDEAE0;
  --on-night-soft: #B9C2BC;
  --dash-muted:    #A7ACA6;

  /* ---- Typography: families ---- */
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --font-logo:  'Bricolage Grotesque', var(--font-sans);

  /* ---- Typography: scale ---- */
  --text-2xs:  0.9rem;   /* mono labels */
  --text-xs:   1rem;   /* eyebrow */
  --text-sm:   1.1rem;
  --text-tag:  1.2rem;      /* section tags */
  --text-base: 1.05rem;   /* body copy, lists */
  --text-md:   1.1rem;    /* section intros */
  --text-lg:   1.2rem;    /* hero intro, price */
  --text-logo: 1.3rem;
  --text-xl:   1.8rem;    /* small serif headings */
  --text-2xl:  2.5rem;    /* panel headings */
  --display-s:  clamp(1.6rem, 3.4vw, 2.8rem);   /* service titles */
  --display-m:  clamp(2rem, 5vw, 3.6rem);       /* section headings */
  --display-l:  clamp(2.2rem, 5vw, 4.2rem);     /* feature headings */
  --display-num: clamp(3.8rem, 6vw, 5.5rem);    /* service numerals */
  --display-xl: clamp(3.2rem, 8vw, 7.6rem);     /* hero */

  --leading-tight: 1.05;
  --leading-head:  1.08;
  --leading-body:  1.6;
  --leading-loose: 1.7;
  --tracking-label: 0.16em;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  2.5rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5.5rem;
  --space-5xl: 7rem;
  --space-6xl: 8rem;

  /* ---- Layout ---- */
  --wrap:        80rem;     /* page width */
  --gutter:      1.75rem;
  --measure:     45rem;     /* max line length for intros */
  --measure-s:   40rem;
  --panel-width: 72.5rem;
  --header-offset: 5.5rem;  /* scroll offset under sticky header */

  /* ---- Borders, radii, texture ---- */
  --hair:        0.0625rem;
  --rule:        0.125rem;
  --radius-s:    0.375rem;
  --radius-m:    0.5rem;
  --radius-pill: 62.5rem;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size:  13.75rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: var(--grain); background-size: var(--grain-size); opacity: 0.05;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-head);
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
h1 em, h2 em { font-style: italic; color: var(--brand); }

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.1875rem;
}
a:hover { color: var(--brand-deep); text-decoration-thickness: var(--rule); }
a:focus-visible { outline: 0.1875rem solid var(--brand); outline-offset: 0.1875rem; border-radius: 0.25rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }

.topbar { height: 0.25rem; background: var(--brand); }

.skip {
  position: absolute; left: var(--space-xs); top: -3.75rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.625rem var(--space-s); border-radius: var(--radius-m);
  text-decoration: none; transition: top 0.2s ease;
}
.skip:focus { top: var(--space-xs); }

/* ---- Shared ---- */
.tag {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: var(--text-tag);
  color: var(--brand); margin-bottom: var(--space-s);
}
.sec-head { max-width: var(--measure); margin-bottom: var(--space-s); }
.sec-head h2 { font-size: var(--display-m); color: var(--ink); }
.sec-lede { max-width: var(--measure-s); margin-top: var(--space-l); color: var(--ink-soft); font-size: var(--text-base); }
.sec-lede + .sec-lede { margin-top: var(--space-s); }

.btn {
  display: inline-block;
  background: var(--brand); color: var(--paper);
  padding: 0.9375rem 2.25rem; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 1rem; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--brand-deep); color: var(--paper); transform: translateY(-0.125rem); }

.cta-row { text-align: center; padding: var(--space-2xl) 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 250, 246, 0.9); backdrop-filter: blur(0.625rem);
  border-bottom: var(--hair) solid var(--line);
}
.site-header nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--wrap); margin: 0 auto; padding: 1.125rem var(--gutter);
}

.brand 
{ font-family: var(--font-logo); 
  font-weight: 800; font-size: var(--text-logo); 
  color: var(--ink); 
  text-decoration: none; 
  display: flex;
  align-items: center;
  text-decoration: none;}

.brand:hover 
{ color: var(--ink); }

.brand span 
{ color: var(--signal); }


.brand img {
  display: block;
}

.nav-links { display: flex; align-items: center; gap: var(--space-m); }
.nav-links a { color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.lets {
  background: transparent;
  color: #0E5A50;
  border: 1px solid rgba(14, 90, 80, 0.4);
 padding: 0.6875rem 1.25rem; border-radius: var(--radius-pill); font-weight: 500;
}
.nav-links a.lets:hover {
  border-color: #0E5A50;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; overflow: hidden; background: var(--paper); padding: var(--space-5xl) 0 var(--space-4xl); text-align: center; }
.hero .wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 80% at 0% 100%, rgba(239, 165, 46, 0.10) 0%, transparent 70%),
    radial-gradient(50% 90% at 100% 0%, var(--brand-soft) 0%, transparent 70%),
    radial-gradient(60% 70% at 50% -10%, var(--brand-soft) 0%, transparent 65%);
}
.hero .wash::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: var(--grain-size); opacity: 0.14; }
.hero-inner { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--text-xs);
  color: var(--brand); margin-bottom: var(--space-l);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.word {
  font-size: var(--display-xl); line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 auto; color: var(--ink);
}
.word em { font-style: italic; color: var(--brand); }
.hero-lede {
  max-width: 43.75rem; margin: var(--space-l) auto var(--space-xl);
  color: var(--ink-soft); font-size: var(--text-lg); line-height: 1.55;
}

.trust-strip {
  position: relative; z-index: 1; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.5625rem 1.125rem; margin: var(--space-l) auto 0;
}
.trust-strip li {
  display: flex; align-items: center;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: var(--text-2xs); color: var(--muted);
}
.trust-strip li:not(:last-child)::after {
  content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%;
  background: var(--line); margin-left: 1.125rem;
}



/* ==========================================================================
   Who this is for
   ========================================================================== */

.fit { padding: var(--space-2xl) 0 var(--space-xl); background: var(--paper); scroll-margin-top: var(--header-offset); }
.fit-head { max-width: 61.25rem; margin: 0 auto var(--space-4xl); text-align: center; }
.fit-head h2 { font-size: var(--display-l); color: var(--ink); }
.fit-head .sec-lede { max-width: var(--measure); margin: var(--space-l) auto 0; line-height: var(--leading-loose); }

.fit-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-m); max-width: var(--panel-width); margin: 0 auto; }
.fit-col {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 3.5rem 3.5rem var(--space-l); border-radius: var(--radius-s);
}
.fit-col::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); background-size: var(--grain-size); opacity: 0.10;
}
.fit-col.yes {
  background: radial-gradient(120% 100% at 0% 0%, var(--brand-tint) 0%, var(--brand-soft) 55%, var(--brand-mist) 100%);
  box-shadow: inset 0 0.1875rem 0 var(--brand);
}
.fit-col.no { background: var(--paper-2); }
.fit-col h3 { font-size: var(--text-2xl); color: var(--ink); margin-bottom: var(--space-l); }
.fit-col.no h3 { color: var(--muted); }
.fit-col ul { list-style: none; }
.fit-col li {
  position: relative; padding-left: 1.875rem; margin-bottom: var(--space-m);
  line-height: 1.65; color: var(--ink-soft); font-size: var(--text-base);
}
.fit-col li::before {  /* check mark */
  content: ""; position: absolute; left: 0.125rem; top: 0.42em;
  width: 0.375rem; height: 0.6875rem;
  border: solid var(--brand); border-width: 0 var(--rule) var(--rule) 0;
  transform: rotate(45deg);
}
.fit-col.no li::before {  /* dash */
  top: 0.8em; width: 0.75rem; height: 0;
  border-width: 0 0 var(--hair) 0; border-color: var(--dash-muted); transform: none;
}

/* ==========================================================================
   What we do
   ========================================================================== */

#work { padding: var(--space-4xl) 0 var(--space-2xl); scroll-margin-top: var(--header-offset); }

.service { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; padding: var(--space-xl) 0; }

.s-left {
  position: sticky; top: 6.875rem; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl);
  min-height: 18.75rem; padding: var(--space-xl) 2.75rem; border-radius: var(--radius-s);
  background: radial-gradient(120% 100% at 0% 0%, var(--brand-tint) 0%, var(--brand-soft) 60%, var(--brand-mist) 100%);
}
.s-left::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); background-size: var(--grain-size); opacity: 0.10;
}
.s-num { font-family: var(--font-serif); font-style: italic; font-size: var(--display-num); line-height: 1; color: var(--brand); }
.service h3 { font-size: var(--display-s); color: var(--ink); }

.service--amber .s-left { background: radial-gradient(120% 100% at 0% 0%, var(--amber-tint) 0%, var(--amber-soft) 60%, var(--amber-mist) 100%); }
.service--amber .s-num { color: var(--signal-ink); }

.service--night .s-left { background: radial-gradient(120% 90% at 100% 0%, var(--night-2) 0%, var(--night) 65%); }
.service--night .s-left::before { opacity: 0.12; }
.service--night .s-left h3 { color: var(--on-night); }
.service--night .s-num { color: var(--signal); }

.s-body { padding-top: var(--space-xs); }
.s-body p { color: var(--ink-soft); font-size: var(--text-base); margin-bottom: var(--space-m); }

/* Dashed list, shared by services and support */
.dash-list { list-style: none; }
.dash-list li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.875rem; align-items: baseline;
  font-size: var(--text-base); color: var(--ink);
}
.dash-list li::before { content: ""; width: 0.75rem; height: var(--rule); background: var(--signal-deep); align-self: center; }

.s-body .dash-list { border-top: var(--hair) solid var(--ink); border-bottom: var(--hair) solid var(--ink); }
.s-body .dash-list li { padding: 0.875rem 0.125rem; border-bottom: var(--hair) solid var(--line); }
.s-body .dash-list li:last-child { border-bottom: none; }

/* ==========================================================================
   How it works
   ========================================================================== */

.process {
  position: relative; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, var(--night-2) 0%, var(--night) 60%);
  color: var(--on-night); padding: 6rem 0 var(--space-xl); scroll-margin-top: var(--header-offset);
}
.process::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); background-size: var(--grain-size); opacity: 0.12;
}
.process .tag { color: var(--signal); }
.process .sec-head h2 { color: var(--on-night); }
.process .btn { background: var(--on-night); color: var(--night); }
.process .btn:hover { background: #fff; color: var(--night); }

.proc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); margin-top: var(--space-l); }
.proc-step { position: relative; padding-top: 1.375rem; border-top: var(--hair) solid rgba(237, 234, 224, 0.28); }
.proc-step .pn { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em; color: var(--signal); }
.proc-step h3 { font-size: var(--text-xl); color: var(--on-night); margin: 0.625rem 0; }
.proc-step p { color: var(--on-night-soft); font-size: var(--text-sm); line-height: 1.55; }

/* ==========================================================================
   Monthly support
   ========================================================================== */

.support { padding: var(--space-2xl) 0; }
.support-sub { font-size: var(--text-2xl); color: var(--ink); margin: var(--space-2xl) 0 var(--space-m); }
.support-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s) var(--space-2xl); margin-bottom: var(--space-2xl); }
.support-list li { color: var(--ink-soft); }
.price { font-size: var(--text-lg); font-weight: 500; color: var(--ink); margin-bottom: var(--space-m); }

.dash-list--cols { 
  display: grid; 
  grid-template-columns: 1fr 1fr; column-gap: 3rem; 
  border-top: none !important; 
  border-bottom: none !important;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  background: var(--brand-soft);
  border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
  padding: var(--space-3xl) 0; scroll-margin-top: var(--header-offset);
}
.contact-inner { max-width: var(--measure-s); }
.contact h2 { font-size: var(--display-m); color: var(--ink); margin-bottom: 1.25rem; }
.contact-lede { max-width: 32.5rem; margin-bottom: var(--space-l); color: var(--ink-soft); font-size: var(--text-md); }
.contact-alt { padding-top: var(--space-m);} 

/* ==========================================================================
   Footer
   ========================================================================== */

footer { border-top: var(--hair) solid var(--line); padding: var(--space-l) 0; background: var(--paper); color: var(--muted); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); font-size: var(--text-sm); }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.375rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--brand); }

/* ==========================================================================
   Legal pages (privacy)
   ========================================================================== */

.legal { padding: var(--space-4xl) 0 var(--space-5xl); }
.legal-inner { max-width: var(--measure); }
.legal h1 { font-size: var(--display-l); color: var(--ink); margin-bottom: var(--space-s); }
.legal .updated { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-2xl); }
.legal h2 {
  font-size: var(--text-2xl); color: var(--ink);
  margin: var(--space-2xl) 0 var(--space-s);
  padding-top: var(--space-l); border-top: var(--hair) solid var(--line);
}
.legal h3 { font-size: var(--text-xl); color: var(--ink); margin: var(--space-l) 0 var(--space-2xs); }
.legal p, .legal li { color: var(--ink-soft); font-size: var(--text-base); line-height: var(--leading-loose); }
.legal p + p { margin-top: var(--space-s); }
.legal ul { margin: var(--space-s) 0 var(--space-s) var(--space-m); }
.legal li + li { margin-top: var(--space-2xs); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal address { font-style: normal; margin-top: var(--space-s); color: var(--ink-soft); line-height: var(--leading-loose); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Small screens (47.5rem = 760px)
   ========================================================================== */

@media (max-width: 47.5rem) {
  .nav-links a:not(.lets) { display: none; }

  .hero { padding: var(--space-2xl) 0 4.5rem; }

  .hero-lede { font-size:1.1rem; }

  .word { 
  margin: 0 auto; color: var(--ink);
  font-size: 4.2rem;
  }
 #work { padding: var(--space-2xl) 0 var(--space-2xl); scroll-margin-top: var(--header-offset); }

 .sec-head h2 { 
  font-size: var(--display-l);
   }
.fit-head h2{ 
  font-size: var(--display-xl);
   }

  .fit { padding: var(--space-lg) 0 4.5rem; }

  .fit-head { margin-bottom: 3.5rem; }
  .fit-cols { grid-template-columns: 1fr; gap: var(--space-s); }
  .fit-col { padding: var(--space-xl) var(--gutter) 1.25rem; }

  .service { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem 0; }
  .s-left { position: relative; top: 0; min-height: 0; padding: var(--space-l) var(--gutter); gap: 1.75rem; }

  .proc-steps { grid-template-columns: 1fr 1fr; gap: 1.625rem; }

  .support-list { grid-template-columns: 1fr; }

  .contact { 
    padding-top: var(--space-2xl); 
    padding-bottom: var(--space-xl); 
  }
  .process { 
    padding-top: var(--space-2xl); 
    padding-bottom: var(--space-lg); 
  }

  .support { 
    padding-top: var(--space-2xl); 
    padding-bottom: var(--space-2xl); 
  }
  .support-sub { font-size: var(--text-xl); }
}


  @media (max-width: 700px) { .dash-list--cols { grid-template-columns: 1fr; } }