/* Rich Experiments: shared styles for every page.
   Change something here and it changes across the whole site. */

:root{
  --bg:#FAF1DC;
  --ink:#14294E;
  --gold:#E4A63C;        /* decoration only: underlines, dog, focus rings */
  --gold-text:#8A5A0E;   /* gold for text and numbers, passes contrast on cream */
  --gold-soft:rgba(228,166,60,.16);
  --rule:rgba(20,41,78,.28);
  --rule-light:rgba(20,41,78,.14);
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px}
@media(max-width:600px){.wrap{padding-left:20px;padding-right:20px}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:12px}

/* ============ Type ============ */
h1,h2,h3{font-weight:600;letter-spacing:-0.02em;line-height:1.06}
h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.55rem);line-height:1.08}
h3{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.2}
.hand{font-family:'Caveat',cursive;font-weight:600;color:var(--ink)}
strong{font-weight:600}
.lead-lg{font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:500;letter-spacing:-0.01em;line-height:1.4}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:1rem;text-decoration:none;
  border:2.5px solid var(--ink);border-radius:999px;
  padding:.72em 1.4em;background:transparent;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--gold)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--gold)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn svg{width:22px;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ============ Nav ============ */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1.5px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;font-size:1.14rem;letter-spacing:-0.01em}
.brand svg{width:34px;height:auto;flex:none}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{text-decoration:none;font-weight:500;font-size:.98rem}
.navlinks a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
.navlinks .btn{padding:.5em 1.1em;font-size:.94rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.burger svg{width:26px;height:auto}
@media(max-width:1060px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1.5px solid var(--rule);flex-direction:column;align-items:flex-start;padding:18px 28px 24px;gap:16px}
  .navlinks.open{display:flex}
  .burger{display:block}
}

/* ============ Sections ============ */
section{border-bottom:1.5px solid var(--rule)}
.sec{padding-top:64px;padding-bottom:64px}
.sec-label{font-size:clamp(1.85rem,3.6vw,2.55rem);font-weight:600;letter-spacing:-0.02em;line-height:1.08;margin-bottom:12px}
.sec-sub{font-size:clamp(1.05rem,1.6vw,1.2rem);margin-bottom:34px;max-width:none}
.sec-label + :not(.sec-sub){margin-top:16px}
@media(max-width:860px){.sec{padding-top:48px;padding-bottom:48px}}

/* Plain dot bullets */
.inc{list-style:none;margin:0 0 18px}
.inc li{padding:5px 0 5px 24px;position:relative}
.inc li::before{content:"";position:absolute;left:4px;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--ink)}

/* ============ Hero ============ */
.hero{border-bottom:none}
.hero .wrap{padding-top:72px;padding-bottom:40px}
.hero h1{margin-bottom:26px;font-size:clamp(2.3rem,5.6vw,4.6rem)}
.hero h1 .u{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 20' preserveAspectRatio='none'%3E%3Cpath d='M 4 12 C 26 2 48 20 70 10 C 92 0 114 18 136 8 C 150 3 164 10 176 8' fill='none' stroke='%23E4A63C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left bottom;background-size:7.5em .22em;
  padding-bottom:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero .lead{font-size:clamp(1.1rem,1.8vw,1.35rem);margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.proof-line{margin-top:34px;font-size:1rem;padding-top:22px;border-top:1.5px solid var(--rule-light)}
@media(max-width:860px){.hero .wrap{padding-top:44px;padding-bottom:28px}}

/* ============ Image strip ============ */
.strip-sec{border-bottom:1.5px solid var(--rule)}
.strip-sec .wrap{padding-bottom:56px}
.strip-head{display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px}
.strip-btn{background:var(--bg);border:2.5px solid var(--ink);border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.strip-btn:hover{background:var(--gold)}
.strip-btn svg{width:22px;height:auto}
.strip-btn.prev svg{transform:scaleX(-1)}
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;list-style:none}
.strip li{flex:0 0 min(340px,78vw);scroll-snap-align:start}
.strip a{display:block;text-decoration:none}
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--gold-soft)}
.strip span{display:block;font-weight:600;font-size:.95rem;margin-top:10px}
.strip small{display:block;font-size:.85rem;font-weight:500}
.strip a:hover img{outline:3px solid var(--gold);outline-offset:3px}

/* ============ Recent work cards ============ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-decoration:none}
.card-media{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--gold-soft)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.card:hover .card-media img{transform:scale(1.03)}
.card-media.fact{background:var(--ink);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.card-media.fact .f{display:flex;flex-direction:column}
.card-media.fact{gap:24px}
@media(max-width:760px){.card-media.fact{aspect-ratio:auto;padding:24px}}
.card-media.fact b{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-0.03em;line-height:1}
.card-media.fact span{font-size:1rem;margin-top:8px;opacity:.92}
.card h3{margin-top:18px;font-size:clamp(1.3rem,2vw,1.6rem)}
.card .client{font-weight:600;font-size:.92rem;margin-top:4px}
.card p{margin-top:8px}
.card .more{margin-top:12px;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.card .more svg{width:26px;transition:transform .15s ease}
.card:hover .more svg{transform:translateX(6px)}

/* ============ Navy band ============ */
.band{background:var(--ink);color:var(--bg);border-bottom:none}
.band .sec-sub{opacity:.92}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid rgba(250,241,220,.3)}
.stat{padding:24px 24px 6px 0}
.stat + .stat{padding-left:24px;border-left:1.5px solid rgba(250,241,220,.3)}
.stat b{display:block;font-size:clamp(1.5rem,2.3vw,1.95rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1;margin-bottom:10px}
.stat span{font-size:.97rem}
.band .clients{margin-top:40px;font-size:clamp(1.05rem,1.6vw,1.2rem);padding-top:24px;border-top:1.5px solid rgba(250,241,220,.3)}
.band .clients strong{font-weight:600}
@media(max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){padding-left:0;border-left:none}
  .stat:nth-child(n+3){border-top:1.5px solid rgba(250,241,220,.18)}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .stat,.stat + .stat{padding-left:0;border-left:none}
  .stat + .stat{border-top:1.5px solid rgba(250,241,220,.18)}
}

/* ============ How I can help ============ */
.offers{border-top:1.5px solid var(--rule)}
.offer{padding:34px 0;border-bottom:1.5px solid var(--rule-light)}
.offer:last-child{border-bottom:none;padding-bottom:0}
.offer h3{margin-bottom:12px}
.offer > p{margin-bottom:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin-bottom:18px}
.pills li{border:1.8px solid var(--ink);border-radius:999px;padding:.3em .85em;font-size:.9rem;font-weight:500}
.offer .cost{font-weight:600}
.offer .recent{font-size:.95rem;margin-top:6px}
.rate{margin-top:30px;font-size:1.2rem;font-weight:600}

/* ============ Work rows ============ */
.rows{border-top:1.5px solid var(--rule)}
.row{
  display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;
  padding:20px 10px 20px 0;border-bottom:1.5px solid var(--rule);text-decoration:none;
  transition:background .15s ease;
}
.row:hover{background:var(--gold-soft)}
.thumb{width:150px;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--gold-soft)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.navy{background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;text-align:center;padding:8px}
.row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.row .t{font-weight:600;font-size:1.12rem;letter-spacing:-0.01em}
.row .client{font-weight:600;font-size:.88rem}
.row .d{font-size:.97rem}
.row .go svg{width:30px;transition:transform .15s ease}
.row:hover .go svg{transform:translateX(6px)}
.row.static{cursor:default}
.row.static:hover{background:transparent}
.tag{font-size:.85rem;font-weight:600;border:1.8px solid var(--ink);border-radius:999px;padding:.32em .8em;white-space:nowrap}
.row .go.ext svg{transform:rotate(-35deg)}
.row:hover .go.ext svg{transform:rotate(-35deg) translateX(6px)}
.rows-heading{padding:58px 0 24px}
.rows-heading .sec-sub{margin-bottom:0}
/* Text-only rows (writing page) */
.rows.plain .row{grid-template-columns:1fr auto;padding-left:0}
@media(max-width:760px){
  .row{grid-template-columns:96px 1fr;gap:4px 16px;align-items:start;padding:18px 0}
  .row .thumb{grid-column:1;grid-row:1 / span 2;width:96px}
  .row .row-main{display:contents}
  .row .t{grid-column:2;grid-row:1;font-size:1.05rem;line-height:1.3;align-self:end}
  .row .client{grid-column:2;grid-row:2;align-self:start}
  .row .d{grid-column:1 / -1;grid-row:3;margin-top:8px}
  .row .go{display:none}
  .row .tag{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:8px}
  .rows.plain .row{grid-template-columns:1fr}
  .rows.plain .row .t,.rows.plain .row .client,.rows.plain .row .d{grid-column:1;grid-row:auto}
}

/* ============ Who this is for ============ */
.who .lead-lg{margin-bottom:26px}
.orgs{margin-top:22px}
.kicker{font-weight:600;margin-top:18px;font-size:1.08rem}

/* ============ How it works ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--rule)}
.step{padding:26px 24px 30px;border-left:1.5px solid var(--rule)}
.step:first-child{border-left:none;padding-left:0}
.step .num{font-weight:700;color:var(--gold-text)}
.step h3{font-size:1.18rem;margin:10px 0 10px}
.step p{font-size:.97rem}
@media(max-width:860px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-left:none;border-top:1.5px solid var(--rule-light);padding:20px 20px 20px 0}
  .step:nth-child(-n+2){border-top:none}
}
@media(max-width:520px){
  .steps{grid-template-columns:1fr}
  .step:nth-child(2){border-top:1.5px solid var(--rule-light)}
}

/* ============ About ============ */
.about .sec-label{margin-bottom:22px}
.about-dog{position:relative;width:min(280px,58vw);margin-left:auto;margin-top:10px}
.about-dog .dog{width:100%}
.dog-note{position:absolute;right:calc(100% + 6px);top:6%;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dog-note .hand{font-size:1.45rem;transform:rotate(-5deg);white-space:nowrap}
.dog-note svg{width:50px;height:auto;transform:rotate(22deg)}
.about p{margin-bottom:16px}
.tail{transform-box:fill-box;transform-origin:2% 88%;animation:wag 1.5s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}

/* ============ Closing call to action ============ */
.cta{border-bottom:none}
.cta h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:14px}
.cta p.sub{font-size:clamp(1.05rem,1.6vw,1.2rem);margin-bottom:30px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta .alt{font-size:.98rem;margin-top:20px}
.cta .alt a{font-weight:600}

/* ============ Footer ============ */
footer{border-top:1.5px solid var(--rule);padding:40px 0 34px;overflow:hidden}
.big-mark{
  position:relative;font-weight:700;letter-spacing:-0.03em;line-height:1.05;
  font-size:clamp(1.9rem,9.4vw,7rem);white-space:nowrap;user-select:none;margin-bottom:30px;
  color:transparent;-webkit-text-stroke:max(2.6px,.036em) var(--ink);
}
/* A cream copy sits on top of the outline. It hides the inner half of the stroke,
   which removes the stray lines where letter shapes overlap. */
.big-mark::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--bg);-webkit-text-stroke:0}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.94rem}
.foot-meta a{text-decoration:none;font-weight:500}
.foot-meta a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:4px}

/* ============ Case pages ============ */
.case-hero{padding:60px 0 24px;border-bottom:none}
.case-hero h1{font-size:clamp(2.3rem,5vw,4rem)}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{border:1.8px solid var(--ink);border-radius:999px;padding:.35em .95em;font-weight:600;font-size:.85rem}
.chip.type{background:var(--ink);color:var(--bg)}
section.cs{border-bottom:none}
section.cs .sec{padding-top:40px;padding-bottom:8px}
section.cs:last-of-type .sec{padding-bottom:56px}
.prose p{margin-bottom:16px}
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1.5px solid var(--rule);margin-top:8px}
.out{padding:22px 24px 26px;border-left:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule)}
.out:first-child{border-left:none;padding-left:0}
.out b{display:block;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin-bottom:6px}
.out span{font-size:.97rem}
@media(max-width:720px){.out{border-left:none;padding-left:0}}
.case-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.case-cta{border-top:1.5px solid var(--rule)}
.case-cta .sec{padding-top:48px;padding-bottom:48px}
.case-cta h2{margin-bottom:10px}
.case-cta p{margin-bottom:24px}
.pager{display:grid;grid-template-columns:1fr 1fr}
.pager a{display:flex;align-items:center;gap:14px;padding:28px 14px;text-decoration:none;font-weight:600;font-size:1.08rem;transition:background .15s ease}
.pager a:hover{background:var(--gold-soft)}
.pager a.next{justify-content:flex-end;text-align:right;border-left:1.5px solid var(--rule)}
.pager svg{width:30px;flex:none}
.pager a.prev svg{transform:scaleX(-1)}
@media(max-width:600px){.pager{grid-template-columns:1fr}.pager a.next{border-left:none;border-top:1.5px solid var(--rule-light)}}

/* ============ Gallery ============ */
.gallery{border-bottom:none}
.gallery .wrap{padding-top:4px;padding-bottom:20px}
.gal-frame{position:relative;overflow:hidden;border-radius:16px;background:var(--ink);touch-action:pan-y}
.gal-track{display:flex;transition:transform .35s ease}
.gal-slide{flex:0 0 100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;margin:0}
.gal-slide img{width:100%;height:100%;object-fit:contain;display:block}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--bg);border:2.5px solid var(--ink);border-radius:999px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.gal-btn:hover{background:var(--gold)}
.gal-btn svg{width:24px;height:auto}
.gal-btn.prev{left:14px}
.gal-btn.prev svg{transform:scaleX(-1)}
.gal-btn.next{right:14px}
.gal-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:14px}
.gal-cap{font-size:.97rem}
.gal-count{font-weight:600;font-size:.92rem;white-space:nowrap}
@media(max-width:600px){.gal-btn{width:38px;height:38px}.gal-btn.prev{left:8px}.gal-btn.next{right:8px}}

/* ============ 404 ============ */
.nf .wrap{padding-top:90px;padding-bottom:90px}
.nf p{margin:18px 0 30px;font-size:1.15rem}

@media(prefers-reduced-motion:reduce){
  .tail{animation:none}
  html{scroll-behavior:auto}
  .gal-track{transition:none}
  .strip{scroll-behavior:auto}
}
.case-cta{margin-top:36px}

/* At a glance facts under a case study title */
.glance{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;margin-top:26px;padding-top:20px;border-top:1.5px solid var(--rule-light);list-style:none}
.glance li strong{font-weight:600}
@media(max-width:700px){.glance{grid-template-columns:1fr}}
.prose ul.inc{margin-top:4px}

/* Photos of Rich at work */
.hero-photo,.about-photo{margin:34px 0 0}
.hero-photo img,.about-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:16px}
.hero-photo img{object-position:50% 28%}
.about-photo{margin:6px 0 26px}
.about-photo img{object-position:50% 40%}
.hero-photo figcaption,.about-photo figcaption{font-size:.92rem;margin-top:10px}
@media(max-width:600px){.hero-photo img,.about-photo img{aspect-ratio:4/3}.hero-photo img{object-position:70% 30%}.about-photo img{object-position:75% 40%}}

/* Service cards on the homepage */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.svc-card{display:flex;flex-direction:column;text-decoration:none;border:2px solid var(--ink);border-radius:16px;padding:26px 24px;transition:transform .15s ease,box-shadow .15s ease}
.svc-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold)}
.svc-card h3{margin-bottom:12px}
.svc-card p{margin-bottom:12px}
.svc-card .cost{font-weight:600;margin-top:auto;margin-bottom:14px}
.svc-card .more{font-weight:600;display:inline-flex;align-items:center;gap:10px}
.svc-card .more svg{width:26px;transition:transform .15s ease}
.svc-card:hover .more svg{transform:translateX(6px)}
@media(max-width:900px){.svc{grid-template-columns:1fr}}

/* Service pages */
.work-together{list-style:none;border-top:1.5px solid var(--rule)}
.work-together li{padding:18px 0;border-bottom:1.5px solid var(--rule-light)}
.work-together li strong{display:block;font-size:1.12rem;margin-bottom:4px}
.svc-steps{counter-reset:s;list-style:none}
.svc-steps li{counter-increment:s;padding:10px 0 10px 44px;position:relative}
.svc-steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.page-cards{margin-top:8px}
.page-lead{margin-top:18px}

/* hero: two buying routes */
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 30px}
.route{display:flex;flex-direction:column;text-decoration:none;border:2px solid var(--ink);border-radius:16px;padding:22px 22px 20px;transition:transform .15s ease,box-shadow .15s ease}
.route:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold)}
.route h2{font-size:clamp(1.2rem,2vw,1.45rem);margin:0 0 10px}
.route p{margin:0 0 14px}
.route .more{margin-top:auto;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.route .more svg{width:26px;transition:transform .15s ease}
.route:hover .more svg{transform:translateX(6px)}
@media(max-width:700px){.routes{grid-template-columns:1fr}}
.svc-steps + .prose{margin-top:18px}