/* ─────────────────────────────────────────────────────────
   The Right Foot Studio — pages.css
   Shared stylesheet for service / about / supporting pages.
   The homepage uses styles.css (its own world).
   These pages are normal scrolling documents — no overflow:hidden.
───────────────────────────────────────────────────────────── */

:root {
  --paper:   #F5F1E6;
  --paper-2: #EFEADB;
  --paper-3: #E7E0CD;
  --ink:     #16130F;
  --ink-soft:#3A342C;
  --muted:   #7C7566;
  --signal:  #FF4A1C;
  --accent:  #8B5CF6;
  --line:    rgba(22,19,15,.13);

  --purple:  #D7AAF1;
  --purple-d:#5A41BF;
  --green:   #94CAA8;
  --peach:   #FD9868;
  --grad:    linear-gradient(158deg,#D7AAF1 0%,#FD9868 100%);

  --sans: "Inter","Helvetica Neue",Helvetica,"Segoe UI",Arial,system-ui,sans-serif;
  --wrap: 1120px;
  --col:  680px;
  --pad:  clamp(1.25rem,5vw,4rem);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grain — same as homepage */
body::before {
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

img  { max-width:100%; display:block; }
a    { color:inherit; }
::selection { background:var(--signal); color:var(--paper); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip {
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  transform:translateY(-160%); transition:transform .2s var(--ease);
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:8px;
  font:600 .9rem/1 var(--sans); text-decoration:none;
}
.skip:focus-visible { transform:none; }

.vh {
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ── SITE HEADER ──────────────────────────────────────────── */

.site-head {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.site-head__logo { text-decoration:none; display:flex; align-items:center; }
.site-head__logo img { height:36px; width:auto; }

/* ── BUTTONS ──────────────────────────────────────────────── */

.btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem 1.2rem;
  border:1.5px solid currentColor;
  border-radius:100px;
  font:500 .875rem/1 var(--sans);
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--ghost { border-color:var(--ink); color:var(--ink); }

/* ── PAGE HERO ────────────────────────────────────────────── */

.p-hero {
  padding:clamp(3.5rem,9vw,7rem) var(--pad) clamp(2.5rem,6vw,4.5rem);
  max-width:var(--wrap); margin:0 auto;
  position:relative; z-index:1;
}

.p-hero__eyebrow {
  display:inline-block;
  font:.72rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:100px;
  margin-bottom:1.75rem;
  background:var(--ink); color:var(--paper);
}
.p-hero__eyebrow--purple { background:var(--purple);  color:var(--ink); }
.p-hero__eyebrow--green  { background:var(--green);   color:var(--ink); }
.p-hero__eyebrow--peach  { background:var(--peach);   color:var(--ink); }

.p-hero__h1 {
  font-size:clamp(2.4rem,6.5vw,4.5rem);
  font-weight:800; line-height:1.08;
  margin:0 0 1.5rem; max-width:18ch;
}

.p-hero__lead {
  font-size:clamp(1.05rem,1.1rem + .4vw,1.35rem);
  color:var(--ink-soft);
  max-width:var(--col); margin:0;
  line-height:1.6;
}

/* ── PAGE BODY ────────────────────────────────────────────── */

.p-body {
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad) clamp(3rem,8vw,6rem);
  position:relative; z-index:1;
}

.p-body__col { max-width:var(--col); }

.p-body h2 {
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  font-weight:700; line-height:1.2;
  margin:3.5rem 0 1rem;
}
.p-body h3 {
  font-size:1.05rem; font-weight:600;
  margin:2rem 0 .5rem;
}
.p-body p  { color:var(--ink-soft); margin:0 0 1.1rem; }
.p-body ul,
.p-body ol { color:var(--ink-soft); padding-left:1.5rem; margin:0 0 1.2rem; }
.p-body li { margin-bottom:.45rem; }
.p-body strong { color:var(--ink); font-weight:600; }

.p-body__divider {
  border:none; border-top:1px solid var(--line);
  margin:3rem 0;
}

/* accent callout block */
.p-callout {
  background:var(--paper-2);
  border-left:3px solid var(--peach);
  border-radius:0 8px 8px 0;
  padding:1.25rem 1.5rem;
  margin:2rem 0;
}
.p-callout p { margin:0; color:var(--ink-soft); font-size:.95rem; }
.p-callout strong { color:var(--ink); }

/* deliverable list */
.deliverables {
  list-style:none; padding:0; margin:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.deliverables li {
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.95rem; color:var(--ink-soft);
}
.deliverables li::before {
  content:""; flex-shrink:0;
  width:.5rem; height:.5rem;
  border-radius:50%;
  background:var(--peach);
  margin-top:.55rem;
}

/* ── PROOF / RESEARCH ─────────────────────────────────────── */

.p-proof {
  background:var(--paper-2);
  padding:clamp(2.5rem,7vw,5rem) var(--pad);
  position:relative; z-index:1;
}
.p-proof__inner { max-width:var(--wrap); margin:0 auto; }
.p-proof__eyebrow {
  display:inline-block;
  font:.72rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem;
}
.p-proof__head {
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700; margin:0 0 2.5rem;
  max-width:32ch;
}
.proof-grid {
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.proof-card {
  background:var(--paper); border-radius:12px;
  padding:1.75rem;
}
.proof-card__num {
  display:block;
  font:.7rem/1 var(--sans); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.9rem;
}
.proof-card__title { font-size:1rem; font-weight:700; margin:0 0 .6rem; line-height:1.3; }
.proof-card__body  { font-size:.9rem; color:var(--ink-soft); margin:0 0 .8rem; line-height:1.6; }
.proof-card__src   { font-size:.78rem; color:var(--muted); margin:0; font-style:italic; }

/* ── SERVICES HUB GRID ────────────────────────────────────── */

.services-grid {
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2.5rem;
}
.svc-card {
  background:var(--paper-2); border-radius:12px;
  padding:2rem;
  text-decoration:none;
  display:flex; flex-direction:column;
  transition:background .2s var(--ease), transform .2s var(--ease);
  border:1px solid transparent;
}
.svc-card:hover {
  background:var(--paper-3);
  transform:translateY(-2px);
  border-color:var(--line);
}
.svc-card__tag  {
  font:.7rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem; display:block;
}
.svc-card__h    { font-size:1.2rem; font-weight:700; margin:0 0 .7rem; line-height:1.25; }
.svc-card__p    { font-size:.9rem; color:var(--ink-soft); margin:0 0 1.75rem; flex:1; line-height:1.6; }
.svc-card__link { font:.875rem/1 var(--sans); font-weight:600; color:var(--ink); }

/* ── CASE STUDY CARDS ─────────────────────────────────────── */

.cases-list { display:grid; gap:1.5rem; margin-top:2rem; }
.case-card {
  background:var(--paper-2); border-radius:12px;
  padding:2rem 2.25rem;
  border-left:4px solid var(--purple);
}
.case-card--2 { border-left-color:var(--peach); }
.case-card--3 { border-left-color:var(--green); }
.case-card__tag {
  font:.7rem/1 var(--sans); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.75rem; display:block;
}
.case-card__h { font-size:1.15rem; font-weight:700; margin:0 0 .75rem; line-height:1.3; }
.case-card__p { font-size:.95rem; color:var(--ink-soft); margin:0 0 .75rem; }
.case-card__nda { font-size:.82rem; color:var(--muted); margin:0; }

/* ── TESTIMONIALS ─────────────────────────────────────────── */

.quotes-list {
  list-style:none; padding:0; margin:2rem 0 0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.quote-item {
  background:var(--paper-2); border-radius:10px;
  padding:1.5rem;
  font-size:.95rem; color:var(--ink-soft);
  font-style:italic; line-height:1.6;
}

/* ── CONTACT FORM ─────────────────────────────────────────── */

.contact-form {
  max-width:600px;
  display:grid; gap:1.25rem;
  margin-top:2rem;
}
.form-row { display:grid; gap:1.25rem; }
@media (min-width:540px) { .form-row { grid-template-columns:1fr 1fr; } }

.form-field { display:flex; flex-direction:column; gap:.45rem; }
.form-field label {
  font:.8rem/1 var(--sans); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  background:var(--paper-2);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:.7rem 1rem;
  font:400 1rem/1.5 var(--sans);
  color:var(--ink);
  transition:border-color .18s;
  width:100%;
  -webkit-appearance:none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline:none;
  border-color:var(--ink);
}
.form-field textarea { resize:vertical; min-height:120px; }
.form-field select { cursor:pointer; }

.form-submit {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.75rem;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:100px;
  font:600 1rem/1 var(--sans);
  cursor:pointer;
  transition:opacity .18s;
  width:fit-content;
}
.form-submit:hover { opacity:.85; }

/* ── CTA SECTION ──────────────────────────────────────────── */

.p-cta {
  padding:clamp(3.5rem,9vw,6rem) var(--pad);
  text-align:center;
  background:var(--ink); color:var(--paper);
  position:relative; z-index:1;
}
.p-cta__inner { max-width:600px; margin:0 auto; }
.p-cta__eyebrow {
  font:.72rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.5; margin-bottom:1rem; display:block;
}
.p-cta__title {
  font-size:clamp(1.8rem,4.5vw,3.2rem);
  font-weight:800; line-height:1.1;
  margin:0 0 1rem;
}
.p-cta__lead { font-size:1.05rem; opacity:.65; margin:0 0 2.25rem; line-height:1.6; }
.p-cta__mail {
  display:inline-flex; align-items:center; gap:.55rem;
  font:600 1rem/1 var(--sans);
  color:var(--purple);
  text-decoration:none;
  border:1.5px solid var(--purple);
  padding:.75rem 1.6rem; border-radius:100px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.p-cta__mail:hover { background:var(--purple); color:var(--ink); }

/* ── FOOTER ───────────────────────────────────────────────── */

.site-foot {
  background:var(--paper-3);
  padding:clamp(2rem,5vw,3.5rem) var(--pad);
  position:relative; z-index:1;
}
.site-foot__inner {
  max-width:var(--wrap); margin:0 auto;
}
.site-foot__nav {
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;
  margin-bottom:2rem;
}
.site-foot__nav-label {
  font:.72rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.75rem;
  display:block; width:100%;
}
.site-foot__nav a {
  text-decoration:none; font-size:.9rem;
  color:var(--ink-soft);
  transition:color .15s;
}
.site-foot__nav a:hover { color:var(--ink); }
.site-foot__fine {
  font-size:.85rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  align-items:center; border-top:1px solid var(--line);
  padding-top:1.5rem; margin-top:1.5rem;
}
.site-foot__fine a { text-decoration:none; }
.site-foot__fine a:hover { color:var(--ink); text-decoration:underline; }

@media (max-width:480px) {
  .p-hero__h1 { max-width:none; }
  .form-row    { grid-template-columns:1fr; }
}

/* ── BLOG LISTING ─────────────────────────────────────────── */

.blog-grid {
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin-top:2.5rem;
}
.blog-card {
  background:var(--paper-2); border-radius:12px;
  padding:2rem;
  display:flex; flex-direction:column;
  border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s;
}
.blog-card:hover { background:var(--paper-3); border-color:var(--line); }
.blog-card__meta {
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1.1rem;
}
.blog-card__tag {
  font:.68rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:.25rem .6rem; border-radius:100px;
}
.blog-card__tag--purple { background:var(--purple);  color:var(--ink); }
.blog-card__tag--green  { background:var(--green);   color:var(--ink); }
.blog-card__tag--peach  { background:var(--peach);   color:var(--ink); }
.blog-card__date {
  font:.8rem/1 var(--sans); color:var(--muted);
}
.blog-card__h {
  font-size:1.15rem; font-weight:700; line-height:1.25;
  margin:0 0 .75rem;
}
.blog-card__h a {
  text-decoration:none;
  transition:opacity .15s;
}
.blog-card__h a:hover { opacity:.7; }
.blog-card__excerpt {
  font-size:.9rem; color:var(--ink-soft); margin:0 0 1.5rem;
  line-height:1.6; flex:1;
}
.blog-card__read {
  font:.875rem/1 var(--sans); font-weight:600;
  color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:.3rem;
}
.blog-card__read:hover { text-decoration:underline; }

/* ── BLOG POST ────────────────────────────────────────────── */

.post-header {
  padding:clamp(3.5rem,9vw,7rem) var(--pad) clamp(2rem,5vw,3.5rem);
  max-width:var(--wrap); margin:0 auto;
  position:relative; z-index:1;
  border-bottom:1px solid var(--line);
}
.post-header__meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  margin-bottom:1.5rem;
}
.post-header__tag {
  font:.68rem/1 var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:.25rem .6rem; border-radius:100px;
}
.post-header__tag--purple { background:var(--purple);  color:var(--ink); }
.post-header__tag--green  { background:var(--green);   color:var(--ink); }
.post-header__tag--peach  { background:var(--peach);   color:var(--ink); }
.post-header__date { font:.85rem/1 var(--sans); color:var(--muted); }

.post-header__h1 {
  font-size:clamp(2rem,5.5vw,3.8rem);
  font-weight:800; line-height:1.08;
  margin:0 0 1.25rem; max-width:22ch;
}
.post-header__lead {
  font-size:clamp(1.05rem,1.1rem + .35vw,1.3rem);
  color:var(--ink-soft); max-width:var(--col);
  margin:0; line-height:1.6;
}

/* Post article body — narrower column, optimised for reading */
.post-body {
  max-width:var(--col);
  margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad) clamp(3rem,8vw,6rem);
  position:relative; z-index:1;
}
.post-body h2 {
  font-size:clamp(1.35rem,2.8vw,1.9rem);
  font-weight:700; line-height:1.2;
  margin:3rem 0 .9rem;
}
.post-body h3 { font-size:1.05rem; font-weight:600; margin:2rem 0 .5rem; }
.post-body p  { color:var(--ink-soft); margin:0 0 1.15rem; font-size:1rem; line-height:1.75; }
.post-body ul,
.post-body ol { color:var(--ink-soft); padding-left:1.5rem; margin:0 0 1.2rem; }
.post-body li { margin-bottom:.5rem; line-height:1.7; }
.post-body strong { color:var(--ink); font-weight:600; }
.post-body a  { text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover { opacity:.7; }

.post-body__callout {
  background:var(--paper-2);
  border-left:3px solid var(--purple);
  border-radius:0 8px 8px 0;
  padding:1.25rem 1.5rem; margin:2rem 0;
}
.post-body__callout p { margin:0; font-size:.95rem; }

.post-body blockquote {
  margin:2rem 0;
  padding:1.5rem 1.75rem;
  background:var(--paper-2); border-radius:8px;
  font-size:1.05rem; font-style:italic;
  color:var(--ink-soft);
}
.post-body blockquote cite {
  display:block; margin-top:.75rem;
  font-size:.82rem; font-style:normal;
  color:var(--muted);
}

/* Post navigation / back link */
.post-back {
  display:inline-flex; align-items:center; gap:.4rem;
  font:.875rem/1 var(--sans); font-weight:500;
  color:var(--muted); text-decoration:none;
  padding:var(--pad) var(--pad) 0;
  max-width:var(--wrap); margin:0 auto; display:block;
  position:relative; z-index:1;
}
.post-back:hover { color:var(--ink); }