/* Pendo Earth Foundation — Design Language v2.0 (Logo Package palette)
   Deep Blue (headings/nav) · Soft White (background) · Warm Stone (section bg)
   Sage Green (accent) · Forest Charcoal (body text) · Deep Wine (call to action)
   No gradients, no shadows, no decorative texture. One call to action per page. */

:root{
  --ink:#2F5E6E;
  --paper:#F7F7F4;
  --sand:#B6A894;
  --bronze:#6F8F7B;
  --stone:#8E887E;
  --carbon:#2E3C34;
  --rule:#E0DCD3;
  --mulberry:#6B2E42;
  --mist:#D8D3C8;
  /* Left edge of the centred content column, so full-bleed panels can align
     their text to the wordmark and nav above them. */
  --gutter:max(1.5rem, calc((100vw - 68rem) / 2));
}

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

html{font-size:100%}

body{
  background:var(--paper);
  color:var(--carbon);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
}

.display{font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--ink)}

a{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  a,.btn{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
}

.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:44rem}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;border-bottom:none;
}
.skip-link:focus{left:1rem;top:1rem}

/* Header */
header{border-bottom:1px solid var(--rule);background:var(--paper)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem 0}
.wordmark{font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:.12em;font-size:1.05rem;color:var(--ink);border-bottom:none}
.wordmark:hover{color:var(--bronze)}
nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
nav a{font-size:.85rem;color:var(--ink);border-bottom:none;letter-spacing:.01em}
nav a:hover{color:var(--bronze)}
nav a[aria-current="page"]{color:var(--bronze);border-bottom:1px solid var(--bronze);padding-bottom:2px}
nav a.btn[aria-current="page"]{border-bottom:none;color:var(--paper)}

/* Mobile nav toggle — hidden on wide screens and whenever JS is unavailable,
   so the nav stays reachable as a plain wrapped list without scripting. */
.nav-toggle{display:none}

/* Buttons — Deep Wine, the page's single action */
.btn{
  display:inline-block;background:var(--mulberry);color:var(--paper);
  padding:.7rem 1.5rem;border-radius:2px;font-size:.9rem;letter-spacing:.02em;
  border:none;border-bottom:none;font-family:inherit;cursor:pointer;text-align:center;
}
.btn:hover{background:var(--ink);color:var(--paper);border-bottom:none}
.btn-nav{padding:.45rem 1rem;font-size:.8rem}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Structure */
.eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:1rem;font-family:"Montserrat",Arial,sans-serif;
}
.hero{padding:5rem 0 3.5rem}
.hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.22;max-width:42rem;margin-bottom:1.4rem}
.rule{width:3.5rem;height:1px;background:var(--bronze);border:none;margin:0 0 1.6rem}
.hero p{max-width:38rem;margin-bottom:1rem}
.hero .btn{margin-top:1rem}

/* Immersive hero — the establishing photograph runs full-width across the top,
   and the thesis sits in a full-width ink band directly below it, its content
   centred in the content column. Flat colour, no overlay, no gradient. */
.hero-immersive{padding:0;background:var(--sand)}
.hero-immersive__figure{position:relative;margin:0;overflow:hidden}
.hero-immersive__figure img{display:block;width:100%;height:clamp(34rem,80vh,48rem);object-fit:cover}
.hero-immersive__credit{
  position:absolute;right:0;top:0;
  background:var(--ink);color:var(--mist);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.5rem .9rem;
}
/* Full-width ink band under the image; its content is centred in the column. */
.hero-immersive__band{background:var(--ink);padding:clamp(3rem,6vw,4.75rem) 0}
.hero-immersive__panel{
  max-width:48rem;margin:0 auto;padding:0 1.5rem;
  text-align:center;color:var(--paper);
}
.hero-immersive__panel .eyebrow{color:var(--sand);margin-bottom:1rem}
.hero-immersive__panel h1{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--paper);
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.16;margin-bottom:1.4rem;
}
.hero-immersive__panel .rule{background:var(--sand);margin:0 auto 1.6rem}
.hero-immersive__panel p{color:var(--mist);max-width:42rem;margin:0 auto 1.6rem}
.hero-immersive__panel .btn{display:inline-block;margin-top:.4rem}
@media (max-width:47rem){
  .hero-immersive__figure img{height:auto;aspect-ratio:16/10}
  .hero-immersive__band{padding:clamp(2.4rem,8vw,3.4rem) 0}
}

section{padding:3.5rem 0}
.section-flush{padding-top:0}
.section-sand{background:var(--sand)}
.section-ink{background:var(--ink)}
h2{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:1.55rem;color:var(--ink);margin-bottom:1rem;line-height:1.3}
.prose p{max-width:44rem;margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.note{max-width:44rem;margin-top:1.2rem}

/* Credibility / card grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.grid-3 h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:1.05rem;color:var(--ink);margin-bottom:.4rem}
.grid-3 p{font-size:.94rem}
.grid-3 > div + div{border-left:1px solid var(--stone);padding-left:2.2rem}
@media (max-width:47rem){
  .grid-3{grid-template-columns:1fr;gap:1.5rem}
  .grid-3 > div + div{border-left:none;padding-left:0;border-top:1px solid var(--stone);padding-top:1.5rem}
}

/* Method list */
.method{max-width:44rem}
.method li{list-style:none;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.method li:last-child{border-bottom:none}
.method strong{font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--ink);display:block;margin-bottom:.15rem;font-size:1.05rem}

/* Dark pull-quote section */
.section-ink blockquote{max-width:34rem}
.section-ink blockquote p{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.45;color:var(--paper);
}
.section-ink cite{
  display:block;margin-top:.9rem;font-style:normal;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist);
}
.section-ink h2,.section-ink p{color:var(--paper)}

/* Photography — contained plates in the content column, framed and spaced so
   they read as deliberate plates rather than raw crops in the flow. The base
   margin plus a following section's 3.5rem top padding gives ~5rem of paper
   around each plate; a coloured section keeps its padding inside the colour, so
   a plate that follows one needs the full gap added on top instead. */
.photo-block{margin-block:1.5rem}
.section-sand + .photo-block,.section-ink + .photo-block{margin-top:5rem}
figure.photo{
  background:var(--sand);border:1px solid var(--stone);
  aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  margin:0;overflow:hidden;
}
figure.photo picture{display:block;width:100%;height:100%}
figure.photo img{width:100%;height:100%;object-fit:cover;display:block}
figure.photo figcaption{font-size:.8rem;color:var(--stone);text-align:center;padding:1rem;letter-spacing:.04em}
figure.photo.tall{aspect-ratio:16/9}

/* Located credit under a plate — names the place the evidence comes from */
.figcredit{
  display:flex;align-items:center;gap:.75rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);
  padding:.95rem 0 0;margin:0;
}
.figcredit::before{content:"";flex:none;width:1.7rem;height:1px;background:var(--bronze)}

/* Lead-in line that introduces a section before its detail */
.lead{font-size:1.16rem;line-height:1.6;max-width:44rem;color:var(--carbon);margin-bottom:2.2rem}

/* References */
.refs{border-top:1px solid var(--rule);padding-top:1.4rem;margin-top:2.5rem}
.refs p{font-size:.82rem;color:var(--stone);max-width:44rem;margin-bottom:.5rem;line-height:1.55}
.refs .refs-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:.8rem}

/* Report block */
.report{border:1px solid var(--stone);padding:1.6rem 1.8rem;max-width:44rem;margin-top:1rem}
.report h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--ink);font-size:1.1rem;margin-bottom:.3rem}
.report p{font-size:.9rem;color:var(--carbon);margin-bottom:1rem}
.report p:last-child{margin-bottom:0}

/* Identity statements */
.identity dt{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);
  margin-top:1.4rem;
}
.identity dd{max-width:44rem;font-family:"Playfair Display",Georgia,serif;font-size:1.15rem;color:var(--ink);line-height:1.55;margin-top:.25rem}

/* Governance */
.governance{font-size:.94rem;max-width:44rem}

/* Signed note */
.signature{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--ink);margin-top:1rem}

/* Contact */
.contact-line{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;margin-top:.5rem}

/* Enquiry form — flat fields, palette only, single .btn action */
.form{max-width:44rem;margin-top:1.6rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{margin-bottom:1.2rem}
.field label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--carbon);
  background:var(--paper);border:1px solid var(--stone);border-radius:2px;
  padding:.7rem .8rem;line-height:1.5;
}
.field textarea{resize:vertical;min-height:9rem}
.field select{appearance:none;background-image:none}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.form-status{
  margin-bottom:1.2rem;padding:.9rem 1rem;border-left:2px solid var(--bronze);
  background:transparent;font-size:.94rem;
}
.form-status:empty{display:none}
.form-status[data-state="error"]{border-left-color:var(--mulberry)}

/* Footer */
footer{background:var(--ink);padding:2rem 0;margin-top:0}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer p{font-size:.78rem;color:var(--mist);line-height:1.6}
footer a{color:var(--mist);border-bottom-color:var(--mist)}
footer a:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* CTA band above footer */
.cta-band{padding:3.2rem 0;border-top:1px solid var(--rule)}
.cta-band h2{margin-bottom:1.2rem}

/* One restrained load moment: hero content rises into place, the plate fades.
   Everything is gated on motion preference so it fully disappears when asked. */
@media (prefers-reduced-motion:no-preference){
  .hero-immersive__panel > *,
  .hero .wrap > *{
    animation:pe-rise .7s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .hero-immersive__panel > h1{animation-delay:.05s}
  .hero-immersive__panel > .rule{animation-delay:.1s}
  .hero-immersive__panel > p{animation-delay:.14s}
  .hero-immersive__panel > .btn{animation-delay:.2s}
}
@keyframes pe-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:47rem){
  .hero{padding:3.2rem 0 2.6rem}
  section{padding:2.6rem 0}
  .form-row{grid-template-columns:1fr;gap:0}

  .header-inner{flex-wrap:nowrap;justify-content:space-between;text-align:left}

  /* With JS the nav collapses behind a toggle; without it the links simply
     stack below the wordmark, so the site stays navigable either way. */
  nav{flex-basis:100%;flex-direction:column;align-items:flex-start;gap:0;padding-top:.5rem}
  nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
  nav a[aria-current="page"]{padding-bottom:.85rem}
  nav a.btn,nav a.btn-nav{
    width:auto;margin-top:1rem;margin-bottom:.4rem;
    padding:.7rem 1.5rem;font-size:.9rem;border-bottom:none;
  }

  .js .header-inner{flex-wrap:wrap}
  .js .nav-toggle{
    display:inline-flex;align-items:center;gap:.55rem;
    background:transparent;border:none;padding:.4rem 0;cursor:pointer;
    font-family:"Montserrat",Arial,sans-serif;font-size:.72rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink);
  }
  .js .nav-toggle-icon{
    position:relative;display:block;width:1.15rem;height:1px;background:var(--ink);
  }
  .js .nav-toggle-icon::before,.js .nav-toggle-icon::after{
    content:"";position:absolute;left:0;width:1.15rem;height:1px;background:var(--ink);
  }
  .js .nav-toggle-icon::before{top:-.35rem}
  .js .nav-toggle-icon::after{top:.35rem}
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-icon{background:transparent}
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{top:0;transform:rotate(45deg)}
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{top:0;transform:rotate(-45deg)}

  .js nav{display:none}
  .js nav[data-open]{display:flex}
}