/* Olyntic — stylesheet
   Two families only: Bricolage Grotesque for display, Instrument Sans for
   everything else. No mono anywhere; that was most of the "techy" feeling.
   Palette is the existing one, with a blue-tinted band instead of grey so
   alternating sections stay in the same family of colour. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#FFFFFF;
  --mist:#F2F6FC;
  --ink:#0A1A33;
  --body:#44536B;
  --muted:#6B7A94;
  --line:#DCE5F2;
  --blue:#1668FF;
  --blue-dp:#0B47C4;
  --blue-wash:#E8F0FF;

  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Instrument Sans',system-ui,sans-serif;

  --wrap:1180px;
  --gut:24px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;color:var(--body);
  /* the grid - 56px squares, up from the 32px on the old site */
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,  rgba(11,42,92,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,42,92,.055) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:0 0;
  font-family:var(--text);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--disp);color:var(--ink);margin:0;
  line-height:1.08;letter-spacing:-0.025em;font-weight:700;
}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
h3{font-size:1.1875rem;letter-spacing:-0.015em}
p{margin:0 0 1.05em}
a{color:var(--blue-dp)}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

/* ---------- small caps label. One device, used everywhere. ---------- */
.label{
  font-family:var(--text);font-size:.75rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);
  display:flex;align-items:center;gap:10px;margin:0 0 .9rem;
}
.label::before{
  content:'';width:22px;height:2px;background:var(--blue);border-radius:2px;flex:0 0 auto;
}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin:0 auto;padding:13px var(--gut)}
.brand{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
.ring{display:block;width:2.4rem;flex:none;line-height:0}
.ring svg{width:100%;height:auto;overflow:visible}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark strong{font-family:var(--text);font-weight:500;font-size:1.02rem;letter-spacing:.3em;text-indent:.3em;color:var(--ink)}
.wordmark em{
  font-style:normal;font-family:var(--text);font-weight:400;font-size:.4rem;
  letter-spacing:.3em;text-indent:.3em;color:var(--blue);margin-top:.4rem;
}
.foot-mark strong{color:#E6EDF8}
.foot-mark em{color:#7FA8E8}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{
  font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:9px 14px;border-radius:8px;
}
.nav a:hover{background:var(--mist)}
.nav a[aria-current="page"]{color:var(--blue-dp);background:var(--blue-wash)}
.head-cta{
  font-family:var(--text);font-weight:600;font-size:.9375rem;background:var(--ink);color:#fff;
  text-decoration:none;padding:11px 18px;border-radius:9px;white-space:nowrap;
}
.head-cta:hover{background:var(--blue-dp)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--line);border-radius:9px;cursor:pointer;margin-left:4px}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .15s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--text);font-weight:600;font-size:1rem;text-decoration:none;
  display:inline-block;padding:15px 26px;border-radius:10px;border:0;cursor:pointer;
  transition:transform .14s ease, background .14s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dp)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.6px var(--ink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- sections ---------- */
.section{padding:clamp(56px,7vw,100px) 0}
/* The 56px page grid is painted on <body>, so a hard edge here chops it
   off. The tint fades in and out over roughly two squares and the borders
   are gone, which lets the grid run straight through. The extra padding
   keeps content clear of the fade zone. */
.section-mist{background:linear-gradient(180deg,
    rgba(232,240,255,0)   0,
    rgba(232,240,255,.72) 104px,
    rgba(232,240,255,.72) calc(100% - 104px),
    rgba(232,240,255,0)   100%);
  padding:clamp(76px,9vw,132px) 0}
.section-head{max-width:620px;margin-bottom:clamp(30px,4vw,48px)}
.section-head p{font-size:1.125rem;margin-bottom:0}

/* ---------- SIGNATURE: the proof frame ----------
   A real site, live, inside browser chrome. The whole pitch is "see it
   before you pay", so the page shows rather than claims. */
.proof{
  border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(10,26,51,.04), 0 30px 60px -30px rgba(10,26,51,.34);
}
.proof-bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:#F7F9FC;border-bottom:1px solid var(--line);
}
.proof-bar i{width:10px;height:10px;border-radius:50%;background:#D7DFEC;flex:0 0 auto}
.proof-url{
  margin-left:8px;font-size:.78125rem;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:4px 11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.proof-view{display:block;position:relative;overflow:hidden;background:#fff;line-height:0}
.proof-view img{width:100%;height:auto;display:block;transition:transform .5s ease}
.proof-view:hover img{transform:scale(1.02)}
.proof-cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 16px;border-top:1px solid var(--line);background:#fff;
}
.proof-cap b{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1rem}
.proof-cap span{font-size:.84375rem;color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,84px) 0 clamp(40px,5vw,72px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,70px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-lede{font-size:1.1875rem;max-width:40ch;margin-bottom:1.7em}
.hero-note{margin:18px 0 0;font-size:.9375rem;color:var(--muted)}

/* ---------- trust strip ---------- */
.strip{display:flex;gap:clamp(22px,4vw,54px);flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--line)}
.strip div span{display:block;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.strip div b{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1.0625rem}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.section-mist .card{background:#fff}
.card h3{margin-bottom:.5em}
.card p{font-size:.96875rem;margin-bottom:0}
.card .ic{
  width:40px;height:40px;border-radius:10px;background:var(--blue-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card .ic svg{width:21px;height:21px;stroke:var(--blue-dp);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---- what's included -------------------------------------------------
   Deliberately not cards. The section above it on the About page already
   uses cards, and two card grids back to back read as one long shrug.
   This is a ruled list, which says "spec sheet" rather than "features". */
.section-ruled{border-top:1px solid var(--line)}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.incl-item{
  display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line);
}
.incl-item .ic{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  background:var(--blue-wash);border-radius:10px;
}
.incl-item .ic svg{
  width:20px;height:20px;stroke:var(--blue-dp);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.incl-item h3{font-size:1.0625rem;margin-bottom:.4em}
.incl-item p{font-size:.9375rem;margin-bottom:0}
@media (max-width:820px){
  .incl{grid-template-columns:1fr;gap:0}
}

/* ---------- steps: a genuine sequence, so numbers earn their place ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);counter-reset:s}
.step{counter-increment:s;padding-top:20px;border-top:2px solid var(--ink)}
.step::before{
  content:counter(s);font-family:var(--disp);font-weight:800;font-size:.875rem;
  color:var(--blue);display:block;margin-bottom:10px;
}
.step h3{margin-bottom:.4em;font-size:1.0625rem}
.step p{font-size:.9375rem;margin-bottom:0}

/* ---------- work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,34px)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;position:relative}
.tier.pick{
  border-color:transparent;overflow:hidden;background:var(--paper);
  box-shadow:0 30px 60px -34px rgba(11,42,92,.45);
}
/* a light running round the border of the one most people pick */
.beam{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.beam::before{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg, transparent 0turn, var(--blue) .04turn, transparent .1turn);
  animation:beam 5s linear infinite;
}
.beam::after{content:"";position:absolute;inset:1.6px;border-radius:inherit;background:var(--paper)}
@keyframes beam{to{rotate:1turn}}
.tier.pick > *:not(.beam){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .beam::before{animation:none;background:var(--blue)}
}
.tier .flag{
  position:absolute;top:-12px;left:26px;background:var(--blue);color:#fff;
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.tier h3{font-size:1.375rem;margin-bottom:.35em}
.tier .blurb{font-size:.9375rem;color:var(--muted);min-height:3.2em;margin-bottom:18px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.price b{font-family:var(--disp);font-weight:800;font-size:2.6rem;color:var(--ink);letter-spacing:-.03em}
.price span{font-size:.9375rem;color:var(--muted)}
.price-alt{font-size:.9375rem;color:var(--muted);margin-bottom:22px}
.tier ul{list-style:none;margin:0 0 24px;padding:0}
.tier li{position:relative;padding:7px 0 7px 26px;font-size:.96875rem;border-bottom:1px solid var(--line)}
.tier li:last-child{border-bottom:0}
.tier li::before{
  content:'';position:absolute;left:2px;top:14px;width:11px;height:6px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.tier .btn{width:100%;text-align:center}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1.0625rem;
  padding:20px 38px 20px 0;cursor:pointer;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 20px;max-width:68ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,60px);align-items:start}
.deets{list-style:none;margin:0;padding:0}
.deets li{padding:15px 0;border-bottom:1px solid var(--line)}
.deets li:last-child{border-bottom:0}
.deets .k{display:block;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.deets .v{font-family:var(--disp);font-weight:700;font-size:1.0625rem;color:var(--ink);text-decoration:none}
a.v:hover{color:var(--blue-dp)}

form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.section-mist form{background:#fff}
.field{display:block;margin-bottom:17px}
.field span{display:block;font-weight:600;font-size:.875rem;color:var(--ink);margin-bottom:6px}
.field i{font-style:normal;font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--text);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;
}
.field input:focus,.field select,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:.875rem;color:var(--muted);margin:12px 0 0}

/* ---------- cta band ---------- */
.cta{background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,86px) 0}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:#A9B9D2;max-width:50ch;font-size:1.125rem;margin-bottom:1.6em}
.cta .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.3)}
.cta .btn-ghost:hover{box-shadow:inset 0 0 0 1.6px #fff}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#8FA2BE;padding:40px 0;font-size:.9375rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot a{color:#CBD8EA;text-decoration:none}
.foot a:hover{color:#fff}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- motion: one quiet reveal, nothing more ---------- */
/* The hidden start state is scoped to .has-js, which the inline script in the
   head sets. If the stylesheet loads but the script does not, nothing is left
   invisible - the page just appears without the reveal. */
@media (prefers-reduced-motion:no-preference){
  .has-js .rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .has-js .rise.in{opacity:1;transform:none}
}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:1fr}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 0 10px;
    box-shadow:0 16px 30px -22px rgba(10,26,51,.5);display:none;
  }
  .nav.open{display:flex}
  .nav a{border-radius:0;padding:14px var(--gut);border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .burger{display:flex}
}
@media (max-width:560px){
  :root{--gut:18px}
  .steps{grid-template-columns:1fr}
  .head-cta{display:none}
}


/* ---------- before-you-go ----------
   Guarded hard: desktop only, once a visit, and never until someone has
   actually been here a while and read some of the page. A prompt that fires
   the second you arrive reads as desperate. */
.leaving{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,26,51,.5);backdrop-filter:blur(3px);
}
.leaving.show{display:flex}
.leaving-card{
  background:#fff;border-radius:16px;max-width:460px;width:100%;
  padding:34px 32px 30px;position:relative;
  box-shadow:0 40px 80px -30px rgba(10,26,51,.55);
  animation:leaveIn .28s ease-out;
}
@keyframes leaveIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.leaving-card{animation:none}}
.leaving-card h3{font-size:1.5rem;margin-bottom:.5em}
.leaving-card p{font-size:1rem;margin-bottom:1.3em}
.leaving-x{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;cursor:pointer;
  background:transparent;color:var(--muted);font-size:1.5rem;line-height:1;border-radius:8px;
}
.leaving-x:hover{background:var(--mist);color:var(--ink)}
.leaving form{border:0;padding:0;background:transparent}
.leaving .row{display:flex;gap:9px}
.leaving .row input{flex:1}
.leaving-skip{
  display:block;margin:14px auto 0;background:0;border:0;cursor:pointer;
  font-family:var(--text);font-size:.875rem;color:var(--muted);text-decoration:underline;
}

/* ---- form reply ---- */
.form-reply{
  margin:14px 0 0;padding:12px 15px;border-radius:8px;font-size:.9375rem;font-weight:500;
}
.form-reply.ok{background:#E8F4EC;border:1px solid #BFE0CC;color:#1C6B3A}
.form-reply.bad{background:#FDECEA;border:1px solid #F3C9C5;color:#9B2019}
.leaving .form-reply{margin-top:12px}