/* Zimi Enterprises Ltd
   The page is built like a document, not a brochure: a schedule of services on
   ruled rows, a numbered procedure, and no stock photography anywhere.
   Light purple throughout, with one deep violet block so the page still has a
   rhythm rather than going flat. */

:root{
  --page:#F4F1F9;         /* the page, and the top bar */
  --band:#E3DAF2;         /* lavender bands: hero, contact */
  --paper:#FBFAFE;        /* raised panels */
  --deep:#3B2466;         /* the one dark block: how an engagement runs */
  --deep2:#2E1B52;        /* footer */
  --ink:#311F58;          /* all type on the light grounds */
  --mute:#5F4D82;         /* secondary type */
  --violet:#602BBC;       /* the accent: calls to action, links */
  --violet-lit:#BCA6F2;   /* the same accent on the dark blocks */
  --line:rgba(49,31,88,.17);
  --line-light:rgba(244,241,249,.24);
  --measure:60ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:clamp(16px,.6rem + .45vw,17.5px);
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-variation-settings:"opsz" 110;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--paper);padding:10px 16px}

/* ── bar ───────────────────────────────────────────────── */
.bar{
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,80px);
  background:var(--page);border-bottom:1px solid var(--line);
}
.bar__brand{
  font-family:Fraunces,Georgia,serif;font-size:1.22rem;font-weight:600;
  text-decoration:none;letter-spacing:-.01em;
}
.bar__brand span{color:var(--violet)}
.bar__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(18px,2.6vw,34px)}
.bar__nav a{text-decoration:none;font-size:.95rem;padding-bottom:3px;border-bottom:1px solid transparent}
.bar__nav a:hover{border-bottom-color:var(--violet)}
.bar__cta{border:1px solid var(--line);padding:7px 18px!important;border-radius:2px}
.bar__cta:hover{background:var(--violet);border-color:var(--violet)!important;color:#fff}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  background:var(--band);
  padding:clamp(48px,7.5vw,96px) clamp(20px,5vw,80px) 0;
}
.hero h1{
  font-size:clamp(2.5rem,1rem + 6.2vw,5.6rem);
  line-height:1.02;letter-spacing:-.022em;
  font-variation-settings:"opsz" 144;
  margin-bottom:.42em;
  max-width:16ch;
}
.hero__lede{
  font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);
  color:var(--mute);max-width:52ch;margin-bottom:2.2em;
}

.practices{
  display:flex;flex-wrap:wrap;list-style:none;margin:clamp(52px,8vw,104px) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.practices li{
  flex:1 1 0;min-width:150px;padding:22px 0 26px;
  font-size:clamp(1rem,.9rem + .35vw,1.18rem);
  color:var(--violet);
  border-inline-start:1px solid var(--line);
  padding-inline-start:20px;
}
.practices li:first-child{border-inline-start:0;padding-inline-start:0}
/* two per row below this width, so every odd item starts a row */
@media (max-width:699px){
  .practices li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
}

/* ── shared section furniture ──────────────────────────── */
.sectionTitle{
  font-size:clamp(1.6rem,1rem + 2vw,2.5rem);
  line-height:1.12;letter-spacing:-.015em;margin-bottom:.9em;max-width:22ch;
}
.sectionTitle--light{color:var(--page)}

.services,.about{padding:clamp(52px,8vw,112px) clamp(20px,5vw,80px)}
.approach,.contact{padding:clamp(52px,8vw,112px) clamp(20px,5vw,80px)}

/* ── services: a ruled schedule, not a row of cards ────── */
.schedule{margin:0;border-top:1px solid var(--line)}
.schedule__row{
  display:grid;gap:4px 48px;grid-template-columns:1fr;
  padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:800px){
  .schedule__row{grid-template-columns:minmax(0,24ch) minmax(0,1fr);gap:0 clamp(32px,5vw,80px)}
}
.schedule dt{
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(1.18rem,1rem + .7vw,1.6rem);line-height:1.2;letter-spacing:-.01em;
}
.schedule dd{margin:0;color:var(--mute);max-width:var(--measure)}

/* ── approach: a genuine sequence, so it is numbered ───── */
.approach{background:var(--deep);color:var(--page)}
.steps{
  list-style:none;counter-reset:step;margin:0;padding:0;
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.steps li{counter-increment:step;padding-top:18px;border-top:1px solid var(--line-light)}
.steps li::before{
  content:counter(step);display:block;
  font-family:Fraunces,Georgia,serif;font-size:1.5rem;color:var(--violet-lit);margin-bottom:10px;
}
.steps h3{font-size:1.2rem;line-height:1.25;margin-bottom:.5em}
.steps p{color:rgba(244,241,249,.8)}

/* ── about ─────────────────────────────────────────────── */
.about__cols{display:grid;gap:clamp(20px,3vw,56px);grid-template-columns:1fr}
@media (min-width:800px){.about__cols{grid-template-columns:1fr 1fr}}
.about__cols p{max-width:var(--measure)}
.about__lead{font-size:clamp(1.1rem,.95rem + .6vw,1.45rem);line-height:1.45}
.about__cols p:not(.about__lead){color:var(--mute)}

/* ── client quotes ─────────────────────────────────────── */
.quotes{
  margin:0 clamp(20px,5vw,80px) clamp(52px,8vw,112px);
  padding:clamp(28px,4vw,56px);
  background:var(--paper);border:1px solid var(--line);
}
.quotes blockquote{margin:0;max-width:52ch}
.quotes blockquote p{
  font-family:Fraunces,Georgia,serif;font-size:clamp(1.25rem,1rem + 1vw,1.85rem);
  line-height:1.3;margin-bottom:.7em;
}
.quotes cite{font-style:normal;color:var(--mute);font-size:.95rem}
.quotes--empty blockquote{opacity:.45}
.quotes__note{margin-top:22px;font-size:.9rem;color:var(--violet)}

/* ── contact ───────────────────────────────────────────── */
.contact{
  background:var(--band);
  display:grid;gap:clamp(34px,5vw,80px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:860px){.contact{grid-template-columns:1fr 1fr}}
.contact .sectionTitle{color:var(--ink)}
.contact__text p{color:var(--mute);max-width:46ch}
.contact__details{
  display:grid;grid-template-columns:auto 1fr;gap:6px 24px;
  margin:2em 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:.96rem;
}
.contact__details dt{color:var(--mute)}
.contact__details dd{margin:0}
.contact__details a{color:var(--violet)}

.form{display:grid;gap:18px}
.field{display:grid;gap:7px;margin:0}
.field label{font-size:.9rem;color:var(--mute)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;width:100%;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{background:#fff}
.form__note{font-size:.86rem;color:var(--violet);max-width:44ch}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-block;justify-self:start;
  font:inherit;font-size:1rem;font-weight:500;line-height:1.2;
  padding:15px 32px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .18s,color .18s;
}
.btn--brass{background:var(--violet);color:#fff}
.btn--brass:hover{background:var(--deep)}

/* ── footer ────────────────────────────────────────────── */
.foot{
  background:var(--deep2);color:rgba(244,241,249,.74);
  padding:clamp(34px,5vw,64px) clamp(20px,5vw,80px);
  display:grid;gap:5px;font-size:.93rem;
}
.foot__name{font-family:Fraunces,Georgia,serif;font-size:1.1rem;color:var(--page)}
.foot__small{margin-top:16px;color:rgba(244,241,249,.58)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}