/* One Step Out — shared site styles. Mobile-first: base rules target phone, min-width layers add tablet/desktop. */

@font-face{ font-family:'Open Sans'; src:url('fonts/OpenSans-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Open Sans'; src:url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Open Sans'; src:url('fonts/OpenSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Open Sans'; src:url('fonts/OpenSans-Semibold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Open Sans'; src:url('fonts/OpenSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --navy:#2d3d67;
  --navy-deep:#1c2847;
  --grey:#97989a;
  --teal:#00ab8b;
  --ink:#1a1a1a;
  --body-text:#555;
  --line:#ececec;
  color-scheme: light;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--body-text);
  font-family:'Open Sans', Arial, sans-serif; font-size:15px; line-height:1.6;
  padding-block: env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 22px; }

/* ===== nav ===== */
.site-nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.site-nav .logo img{ height:20px; }
.site-nav .menu-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer;
}
.site-nav .menu-toggle span, .site-nav .menu-toggle span::before, .site-nav .menu-toggle span::after{
  content:""; display:block; width:16px; height:2px; background:var(--navy); position:relative;
}
.site-nav .menu-toggle span::before{ position:absolute; top:-5px; }
.site-nav .menu-toggle span::after{ position:absolute; top:5px; }
.site-nav .links{
  display:none; position:absolute; top:57px; left:0; right:0; background:#fff;
  border-bottom:1px solid var(--line); flex-direction:column; padding:6px 22px 18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06); z-index:20;
}
.site-nav .links.open{ display:flex; }
.site-nav .links a{
  padding:12px 0; font-size:14.5px; font-weight:600; color:#333; text-decoration:none;
  border-top:1px solid var(--line);
}
.site-nav .links a:first-child{ border-top:none; }
.site-nav .links a.current{ color:var(--navy); }
.site-nav .links a.cta-nav{ color:var(--teal); }

/* ===== page header (non-home pages) ===== */
.page-head{ padding:44px 22px 8px; text-align:center; }
.eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.eyebrow .rule{ width:32px; height:3px; background:var(--teal); }
.eyebrow span{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }
.page-head h1{ font-size:28px; font-weight:300; color:var(--ink); margin:0 0 12px; line-height:1.3; }
.page-head h1 b{ font-weight:700; color:var(--navy); }
.page-head p{ font-size:15px; color:var(--body-text); max-width:560px; margin:0 auto; }

/* ===== hero (home) ===== */
.hero{ padding:52px 24px 8px; text-align:center; }
.rule-center{ width:38px; height:3px; background:var(--teal); margin:0 auto 20px; }
.hero h1{ font-size:28px; line-height:1.3; font-weight:300; color:var(--ink); margin:0 0 18px; }
.hero h1 b{ font-weight:700; color:var(--navy); }
.hero p.sub{ font-size:18px; line-height:1.55; font-weight:600; color:var(--navy); max-width:480px; margin:0 auto 28px; }

/* ===== rotating headline (home) ===== */
.rotating-headline{ position:relative; display:grid; }
.rotating-headline .rh-line{
  grid-area:1/1; opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.rotating-headline .rh-line.is-active{ opacity:1; pointer-events:auto; }
.rh-accent{ color:var(--teal); font-weight:700; font-style:italic; }
.cta{
  display:inline-block; color:var(--navy); font-weight:700; font-size:14px; text-decoration:none;
  border-bottom:2px solid var(--teal); padding-bottom:3px;
}
.cta.solid{
  background:var(--navy); color:#fff; padding:13px 26px; border-radius:4px; border-bottom:none;
}

.divider{ padding:0 24px; }
.divider hr{ border:none; border-top:1px solid var(--line); margin:0; }

/* ===== pillars (home teaser) ===== */
.pillars{ display:grid; grid-template-columns:1fr; gap:14px; padding:8px 24px 28px; }
.pillar{
  text-align:center; padding:22px 18px; border:1.5px solid rgba(0,171,139,.35); border-radius:10px;
  background:rgba(0,171,139,.05); font-size:14.5px; font-weight:700; color:var(--navy); line-height:1.4;
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pillar-icon{ width:30px; height:30px; color:var(--teal); flex-shrink:0; transition:color .2s ease; }
.pillar-icon svg{ width:100%; height:100%; display:block; }
.pillar:hover{
  background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,171,139,.28);
}
.pillar:hover .pillar-icon{ color:#fff; }

/* ===== about bio intro (photo + text) ===== */
section.block.bio-intro{ padding-top:0; padding-bottom:0; margin-bottom:-55px; position:relative; }
.bio-intro{ display:flex; flex-direction:column; gap:16px; align-items:center; }
.photo-frame{ width:240px; flex-shrink:0; position:relative; z-index:2; order:2; }
.photo-frame img{
  display:block; width:100%; height:auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 90%);
}
.bio-intro-text{ text-align:center; order:1; padding-bottom:48px; }
.bio-intro-text p:last-child{ margin-bottom:0; }
.bio-intro-text p.lede{ font-size:17px; font-weight:600; color:var(--navy); line-height:1.5; }

/* ===== generic content sections ===== */
section.block{ padding:40px 22px; max-width:760px; margin:0 auto; }
section.block.wide{ max-width:900px; }
section.block h2{ font-size:20px; font-weight:700; color:var(--navy); margin:0 0 16px; }
section.block h2 .rule-inline{ display:block; width:28px; height:3px; background:var(--teal); margin-bottom:12px; }
section.block p{ margin:0 0 16px; }
section.block p:last-child{ margin-bottom:0; }
section.block.tint{ background:#f7f7f7; }
section.block ul.plain{ margin:0; padding:0 0 0 18px; }
section.block ul.plain li{ margin-bottom:10px; }

/* who-this-is-for / CTA banner */
.banner{ background:var(--navy); color:#fff; padding:40px 22px; text-align:center; }
.banner h2{ color:#fff; font-size:19px; margin:0 0 14px; }
.banner p{ color:rgba(255,255,255,.85); max-width:600px; margin:0 auto; }

/* ===== home quote carousel (inside navy banner) ===== */
.banner-quotes{ padding:52px 22px; }
.quote-carousel{ position:relative; max-width:680px; margin:0 auto; display:grid; min-height:160px; }
.qc-item{
  grid-area:1/1; margin:0; opacity:0; transition:opacity .7s ease; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
}
.qc-item.is-active{ opacity:1; pointer-events:auto; }
.qc-item p{
  margin:0 0 14px; font-size:19px; line-height:1.5; font-weight:300; font-style:italic; color:#fff;
}
.qc-item cite{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal);
}
.qc-dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.qc-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s ease; }
.qc-dot.is-active{ background:var(--teal); }

/* ===== services offerings ===== */
.offering{ padding:22px 0; border-top:1px solid var(--line); }
.offering:first-child{ border-top:none; }
.offering h3{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.offering p{ margin:0 0 8px; }
.offering .outcome{ font-size:13.5px; font-style:italic; color:var(--grey); margin:0; }

/* ===== core values / "how I work" (about) ===== */
.values{ display:flex; flex-direction:column; gap:0; }
.value{ padding:26px 0; border-top:1px solid var(--line); }
.value:first-child{ border-top:none; }
.value-icon{ width:34px; height:34px; color:var(--teal); margin:0 0 12px; }
.value-icon svg{ width:100%; height:100%; display:block; }
.value h3{ font-size:16.5px; font-weight:700; color:var(--navy); margin:0 0 8px; }
.value .strap{ font-style:italic; color:var(--body-text); margin:0 0 14px; font-size:14px; line-height:1.55; }
.value .behaviours{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--teal); line-height:1.8;
}
.value .behaviours .dot{ color:var(--grey); margin:0 3px; font-weight:400; opacity:.6; }

/* ===== qualify cards (contact) ===== */
.qualify-grid{ display:flex; flex-direction:column; gap:0; }
.qualify-card{ padding:24px 0; border-top:1px solid var(--line); }
.qualify-card:first-child{ border-top:none; }
.qualify-icon{
  width:40px; height:40px; color:#fff; background:var(--navy); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 0 14px;
}
.qualify-icon svg{ width:22px; height:22px; }
.qualify-card h3{ font-size:15.5px; font-weight:700; color:var(--navy); margin:0 0 6px; }
.qualify-card p{ margin:0; font-size:14px; }

/* ===== methodology cards (about) ===== */
.method-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.method-card{ border:1px solid var(--line); border-radius:10px; padding:22px 22px 24px; }
.method-icon{
  width:40px; height:40px; color:#fff; background:var(--navy); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 0 14px;
}
.method-icon svg{ width:22px; height:22px; }
.method-card h3{ font-size:15.5px; font-weight:700; color:var(--navy); margin:0 0 6px; }
.method-card p{ margin:0; font-size:14px; }

/* ===== testimonials (floating, varied scale) ===== */
.testi-grid{ display:flex; flex-direction:column; gap:30px; }
.testi{ padding:0 0 26px; border-bottom:1px solid var(--line); text-align:center; }
.testi:last-child{ border-bottom:none; padding-bottom:0; }
.testi blockquote{ margin:0 0 14px; line-height:1.5; font-style:italic; color:var(--ink); font-weight:300; }
.testi cite{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--grey);
}
.testi-empty{ text-align:center; padding:20px 0 8px; color:var(--grey); font-size:14px; font-style:italic; }

/* type scale, biggest for the shortest quotes */
.testi-md blockquote{ font-size:16px; }
.testi-lg blockquote{ font-size:19px; }
.testi-xl blockquote{ font-size:24px; font-weight:400; }

/* colour variants */
.testi.accent-navy blockquote{ color:var(--navy); }
.testi.accent-navy cite{ color:var(--navy); opacity:.7; }
.testi.accent-teal blockquote{ color:var(--teal); font-weight:600; font-style:normal; }
.testi.accent-teal cite{ color:var(--teal); }

/* full-width feature quote — breaks the grid rhythm for a standout story */
.testi-feature{ text-align:center; max-width:620px; margin:8px auto 40px; }
.testi-feature .mark{ font-size:34px; line-height:1; color:var(--teal); font-weight:700; margin:0 0 6px; }
.testi-feature blockquote{
  margin:0 0 14px; font-size:19px; line-height:1.55; font-style:normal; font-weight:600; color:var(--navy);
}
.testi-feature cite{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--grey);
}

/* explicit two-up pair — guaranteed side by side on desktop, unlike the masonry .testi-grid */
.testi-pair{ display:flex; flex-direction:column; gap:30px; margin-bottom:40px; }
.testi-pair .testi{ padding:0 0 26px; border-bottom:1px solid var(--line); }
.testi-pair .testi:last-child{ border-bottom:none; padding-bottom:0; }

/* unattributed advice callout — same full-width feature treatment, no cite, small label instead */
.testi-feature-advice{ margin-top:0; }
.testi-feature-advice .eyebrow-label{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin:0 0 10px;
}

/* ===== interspersed pull-quote (client voice, woven into other pages) ===== */
.pullquote{ padding:36px 22px; max-width:680px; margin:0 auto; text-align:center; }
.pullquote .mark{ font-size:36px; line-height:1; color:var(--teal); font-weight:700; margin:0 0 8px; }
.pullquote blockquote{ margin:0 0 12px; font-size:19px; line-height:1.5; font-weight:300; font-style:italic; color:var(--ink); }
.pullquote cite{ font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--grey); }

/* ===== contact form (used on contact page later) ===== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--navy); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:4px; font:inherit; color:var(--ink); background:#fff;
}
.field textarea{ min-height:120px; resize:vertical; }
.btn-submit{
  background:var(--teal); color:#fff; border:none; padding:13px 28px; border-radius:4px;
  font-weight:700; font-size:14px; cursor:pointer;
}

/* ===== scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity 1.1s ease, transform 1.1s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ===== work-group (The Work page) — teal-accented, floats in/out from the side as you scroll ===== */
.work-group{
  border-left:4px solid var(--teal);
  background:rgba(0,171,139,.045);
  border-radius:0 10px 10px 0;
  margin:0 22px 34px;
  padding:4px 4px 4px 20px;
  opacity:0;
  transform:translateX(-38px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.work-group.is-visible{ opacity:1; transform:none; }
.work-group[data-side="right"]{
  border-left:none; border-right:4px solid var(--teal); border-radius:10px 0 0 10px;
  padding:4px 20px 4px 4px;
  transform:translateX(38px);
}
.work-group section.block{ padding:28px 18px; max-width:none; }
.work-group section.pullquote{ padding:4px 18px 28px; max-width:none; text-align:left; }
.work-group .pullquote .mark{ font-size:28px; }
.work-group .pullquote blockquote{ font-size:17px; font-weight:600; color:var(--navy); font-style:normal; }

@media (prefers-reduced-motion: reduce){
  .reveal, .work-group{ opacity:1; transform:none; transition:none; }
}

/* ===== footer ===== */
footer.site-footer{ border-top:1px solid var(--line); padding:28px 22px; text-align:center; }
footer.site-footer img{ height:16px; margin:0 auto 12px; }
footer.site-footer .foot-links{ display:flex; justify-content:center; gap:18px; margin-bottom:12px; flex-wrap:wrap; }
footer.site-footer .foot-links a{ font-size:12.5px; font-weight:600; color:#333; text-decoration:none; }
footer.site-footer p{ margin:0; font-size:11.5px; color:var(--grey); }

/* ================= tablet / desktop ================= */
@media (min-width: 720px){
  .site-nav{ padding:26px 48px; position:relative; }
  .site-nav .logo img{ height:24px; }
  .site-nav .menu-toggle{ display:none; }
  .site-nav .links{
    display:flex !important; position:static; flex-direction:row; align-items:center; gap:34px;
    padding:0; border:none; box-shadow:none; background:none;
  }
  .site-nav .links a{ padding:0; border-top:none; font-size:13.5px; letter-spacing:.01em; }

  .page-head{ padding:72px 48px 16px; }
  .page-head h1{ font-size:38px; }
  .page-head p{ font-size:16px; }

  .hero{ padding:96px 48px 12px; max-width:760px; margin:0 auto; }
  .hero h1{ font-size:44px; margin:0 0 22px; }
  .hero p.sub{ font-size:21px; max-width:620px; margin:0 auto 34px; }

  .divider{ max-width:1000px; margin:64px auto 0; padding:0 48px; }

  .pillars{
    grid-template-columns:repeat(2, 1fr); gap:18px; padding:52px 48px 76px;
    max-width:1000px; margin:0 auto;
  }

  .method-grid{ grid-template-columns:repeat(2, 1fr); }

  section.block{ padding:64px 48px; }
  section.block h2{ font-size:23px; }

  section.block.bio-intro{ padding-top:0; margin-bottom:-80px; }
  .bio-intro{ flex-direction:row; align-items:flex-start; gap:32px; text-align:left; }
  .photo-frame{ width:300px; order:1; }
  .bio-intro-text{ text-align:left; order:2; padding-bottom:130px; padding-top:0; }
  .bio-intro-text p.lede{ font-size:19px; }
  .banner{ padding:60px 48px; }
  .banner h2{ font-size:24px; }
  .banner-quotes{ padding:76px 48px; }
  .quote-carousel{ min-height:150px; }
  .qc-item p{ font-size:25px; }

  .pullquote{ padding:56px 48px; }
  .pullquote blockquote{ font-size:24px; }

  .work-group{ max-width:860px; margin:0 auto 52px; padding:10px 10px 10px 36px; transform:translateX(-60px); }
  .work-group[data-side="right"]{ padding:10px 36px 10px 10px; transform:translateX(60px); }
  .work-group section.block{ padding:44px 36px; }
  .work-group section.pullquote{ padding:6px 36px 44px; }
  .work-group .pullquote blockquote{ font-size:19px; }

  .testi-grid{ display:block; column-count:2; column-gap:56px; }
  .testi{
    display:inline-block; width:100%; break-inside:avoid; margin-bottom:40px; border-bottom:none; padding-bottom:0;
    text-align:left;
  }
  .testi:last-child{ margin-bottom:40px; }
  .testi.lift-sm{ margin-top:22px; }
  .testi.lift-md{ margin-top:52px; }
  .testi.lift-lg{ margin-top:88px; }
  .testi-md blockquote{ font-size:17px; }
  .testi-lg blockquote{ font-size:21px; }
  .testi-xl blockquote{ font-size:28px; }

  .testi-feature{ margin:24px auto 56px; }
  .testi-feature blockquote{ font-size:26px; }

  .testi-pair{ flex-direction:row; gap:56px; margin-bottom:8px; }
  .testi-pair .testi{ flex:1; border-bottom:none; padding-bottom:0; }
  .testi-feature-advice{ margin-top:48px; }

  .values{ flex-direction:row; align-items:flex-start; }
  .value{ flex:1; border-top:none; border-left:1px solid var(--line); padding:0 30px; }
  .value:first-child{ border-left:none; padding-left:0; }
  .value:last-child{ padding-right:0; }

  /* Guiding Values (4 columns) wraps 2x2 until there's room for all four side by side */
  .values-4{ flex-wrap:wrap; row-gap:40px; }
  .values-4 .value{ flex:1 1 42%; border-left:1px solid var(--line); }
  .values-4 .value:nth-child(2n+1){ border-left:none; padding-left:0; }
  .values-4 .value:nth-child(-n+2){ border-top:none; }

  .qualify-grid{ flex-direction:row; flex-wrap:wrap; gap:0; }
  .qualify-card{ flex:1 1 42%; border-top:none; border-left:1px solid var(--line); padding:0 26px 30px; }
  .qualify-card:nth-child(2n+1){ border-left:none; padding-left:0; }
  .qualify-card:nth-child(-n+2){ padding-top:0; }

  footer.site-footer{ padding:36px 48px; }
}

@media (min-width: 980px){
  .values-4{ flex-wrap:nowrap; row-gap:0; }
  .values-4 .value{ flex:1; border-left:1px solid var(--line); padding:0 26px; }
  .values-4 .value:first-child{ border-left:none; padding-left:0; }
  .values-4 .value:last-child{ padding-right:0; }

  .pillars{ grid-template-columns:repeat(5, 1fr); gap:14px; }
  .pillar{ padding:20px 14px; font-size:13px; }

  .method-grid{ grid-template-columns:repeat(3, 1fr); }
}