/* ==========================================================================
   JIP LAW — stylesheet
   Palette and type matched to the existing jiplaw.com design.
   Every colour below was sampled directly off the live site.
   ========================================================================== */

:root{
  /* Sampled from the live site — do not change without a reason */
  --paper:      #FAF9F7;   /* page background */
  --ink:        #1C2331;   /* headings, wordmark, footer background */
  --body:       #394150;   /* body copy, nav links */
  --rule:       #E5E2DE;   /* hairlines and card borders */
  --muted:      #777B83;   /* eyebrows, footer labels, disclaimer */
  --foot-link:  #A4A7AD;   /* footer links and tagline */
  --foot-rule:  #333946;   /* footer divider */
  --hover:      #F3F1ED;   /* card hover wash */

  --wrap: 1220px;
  --gut: clamp(20px, 4vw, 40px);

  /* ---- TYPEFACES -------------------------------------------------------
     The live site pairs a high-contrast display serif with a neutral UI sans.
     If the firm's site uses a different sans, change --sans here only and the
     whole site follows. Likely alternates are already in the fallback stack.
     --------------------------------------------------------------------- */
  --serif: "Playfair Display", "Times New Roman", Times, serif;
  --sans:  "Inter", "DM Sans", "Plus Jakarta Sans", -apple-system,
           BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.band{ padding-block:clamp(64px,7.5vw,116px); }
.band--tight{ padding-block:clamp(44px,5vw,72px); }
.band--line{ border-top:1px solid var(--rule); }
.band--ink{ background:var(--ink); color:var(--foot-link); }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); margin:0; font-weight:500; line-height:1.16; }
h1{ font-size:clamp(2.2rem,4.2vw,3.55rem); letter-spacing:-.012em; }
h2{ font-size:clamp(1.75rem,2.9vw,2.6rem); letter-spacing:-.01em; }
h3{ font-size:clamp(1.22rem,1.6vw,1.42rem); line-height:1.3; }
h4{ font-size:1.06rem; line-height:1.4; }
p{ margin:0 0 1.15em; }
.lede{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.5; color:var(--body); }
.prose{ max-width:65ch; }
.muted{ color:var(--muted); }
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{ color:#FFFFFF; }
.band--ink p{ color:var(--foot-link); }

.eyebrow{
  font-size:.74rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.15rem;
}
.eyebrow--center{ text-align:center; }

hr.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* ---------- Links and calls to action ----------
   Matches the site's "Contact the Firm →" treatment: a rule-underlined text
   link with a trailing arrow. No filled buttons anywhere on the site. */
.link{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:1rem; color:var(--ink); text-decoration:none;
  padding-bottom:.55rem; border-bottom:1px solid var(--ink);
  transition:gap .25s ease, opacity .25s ease;
}
.link::after{ content:"\2192"; font-size:1.05em; line-height:1; }
.link:hover{ gap:1rem; opacity:.7; }
.link--quiet{ border-bottom-color:var(--rule); color:var(--body); font-size:.95rem; }
.link--light{ color:#FFFFFF; border-bottom-color:rgba(255,255,255,.5); }
.link-row{ display:flex; flex-wrap:wrap; gap:2.2rem 2.8rem; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-size:1rem; font-weight:500; text-decoration:none;
  padding:1.05rem 2.4rem; border:1px solid var(--ink); border-radius:6px;
  color:#FFFFFF; background:var(--ink); cursor:pointer;
  transition:opacity .2s ease;
}
.btn:hover{ opacity:.86; }
.btn[disabled]{ opacity:.5; cursor:default; }

/* ---------- Header ---------- */
.masthead{ background:var(--paper); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:60; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:72px; }
.brand{ font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--ink);
  text-decoration:none; letter-spacing:-.01em; line-height:1; }
.brand img{ height:34px; width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.6rem); }
.nav a{ font-size:.95rem; color:var(--body); text-decoration:none; padding:.35rem 0;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease; }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

.navtoggle{ display:none; background:none; border:1px solid var(--rule); padding:.55rem .9rem;
  font-family:var(--sans); font-size:.9rem; color:var(--ink); cursor:pointer; }
@media (max-width:940px){
  .nav{ position:fixed; left:0; right:0; top:73px; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:0 var(--gut) 1.25rem;
    display:none; }
  .nav.is-open{ display:flex; }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--rule); }
  .nav a[aria-current="page"]{ border-bottom-color:var(--rule); }
  .navtoggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(72px,10vw,150px) clamp(64px,8vw,120px); }
.hero h1{ max-width:17ch; margin-bottom:1.6rem; }
.hero .lede{ max-width:52ch; margin-bottom:2.6rem; }

.banner{ padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,64px); border-bottom:1px solid var(--rule); }
.banner h1{ max-width:20ch; margin-bottom:1.3rem; }
.banner .lede{ max-width:60ch; margin:0; }

/* ---------- Credential row ---------- */
.creds{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.creds .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.creds div{ padding:1.9rem 1.6rem; border-left:1px solid var(--rule); }
.creds div:first-child{ border-left:0; padding-left:0; }
.creds strong{ display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem;
  color:var(--ink); margin-bottom:.3rem; }
.creds span{ font-size:.9rem; color:var(--muted); }
@media (max-width:820px){
  .creds .wrap{ grid-template-columns:1fr 1fr; }
  .creds div{ border-top:1px solid var(--rule); }
  .creds div:nth-child(-n+2){ border-top:0; }
  .creds div:nth-child(odd){ border-left:0; padding-left:0; }
}

/* ---------- Section heads ---------- */
.sechead{ max-width:62ch; margin-bottom:clamp(34px,4vw,58px); }
.sechead h2{ margin-bottom:1rem; }
.sechead .lede{ margin:0; }

/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .cards,.cards--3{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--rule); background:var(--paper); padding:clamp(26px,2.8vw,40px);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:background .25s ease, border-color .25s ease; }
a.card:hover{ background:var(--hover); border-color:#D6D2CC; }
.card h3{ margin-bottom:.8rem; }
.card p{ font-size:.97rem; margin-bottom:1.4rem; }
.card .go{ margin-top:auto; font-size:.9rem; color:var(--ink); }
.card .go::after{ content:" \2192"; }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,84px); align-items:start; }
.split--narrow{ grid-template-columns:.8fr 1.2fr; }
@media (max-width:900px){ .split,.split--narrow{ grid-template-columns:1fr; } }

/* ---------- Numbered principles (matches the site's 01 / 02 markers) ---------- */
.numbers{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,3.5vw,52px); }
@media (max-width:760px){ .numbers{ grid-template-columns:1fr; } }
.numbers > div{ border-top:1px solid var(--rule); padding-top:1.5rem; }
.numbers .n{ font-family:var(--serif); font-size:1.05rem; color:var(--muted); display:block;
  margin-bottom:.9rem; }
.numbers h4{ margin-bottom:.55rem; }
.numbers p{ font-size:.96rem; margin:0; }

/* ---------- Detail lists ---------- */
.cols2{ columns:2; column-gap:2.6rem; padding-left:1.15rem; margin:0 0 1.9rem; font-size:.96rem; }
.cols2 li{ break-inside:avoid; margin-bottom:.35rem; }
@media (max-width:700px){ .cols2{ columns:1; } }

/* ---------- Industry rows ---------- */
.rows{ border-top:1px solid var(--rule); }
.rows > div{ border-bottom:1px solid var(--rule); padding:clamp(22px,2.6vw,34px) 0;
  display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(16px,3vw,48px); }
.rows h3{ margin:0; }
.rows p{ margin:0; font-size:.97rem; }
@media (max-width:760px){ .rows > div{ grid-template-columns:1fr; gap:.6rem; } }

/* ---------- People ---------- */
.people{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
@media (max-width:960px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .people{ grid-template-columns:1fr; } }
.person{ border:1px solid var(--rule); }
.person-portrait{ aspect-ratio:4/5; background:var(--hover); display:flex; align-items:center;
  justify-content:center; border-bottom:1px solid var(--rule); }
.person-portrait img{ width:100%; height:100%; object-fit:cover; }
.person-portrait .initials{ font-family:var(--serif); font-size:2.2rem; color:#C2BDB5; }
.person-body{ padding:clamp(22px,2.2vw,30px); }
.person-body h3{ margin-bottom:.35rem; }
.person-role{ font-size:.83rem; color:var(--muted); margin-bottom:1.1rem; }
.person-body p{ font-size:.94rem; margin:0; }

/* ---------- Quote ---------- */
.quote{ max-width:52rem; }
.quote blockquote{ margin:0 0 1.3rem; font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.32; color:var(--ink); font-weight:500; }
.quote cite{ font-family:var(--sans); font-style:normal; font-size:.86rem; color:var(--muted); }
.band--ink .quote blockquote{ color:#FFFFFF; }

/* ---------- Insights ---------- */
.entry{ display:grid; grid-template-columns:180px 1fr; gap:clamp(16px,3vw,48px);
  padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--rule); }
.entry:first-child{ border-top:1px solid var(--rule); }
.entry-meta{ font-size:.85rem; color:var(--muted); }
.entry-meta span{ display:block; color:var(--body); margin-bottom:.2rem; }
.entry h3{ margin-bottom:.5rem; }
.entry p{ margin:0; font-size:.97rem; max-width:64ch; }
@media (max-width:720px){ .entry{ grid-template-columns:1fr; gap:.6rem; } }

/* ---------- Form ----------
   Matched to the firm's existing enquiry form: uppercase letterspaced labels,
   white fields with a soft radius, filled dark submit button. */
.form{ display:grid; gap:1.5rem; }
.field label{
  display:block; font-size:.8rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.65rem;
}
.field label .muted{ text-transform:uppercase; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#FFFFFF; border:1px solid var(--rule); border-radius:6px;
  padding:.95rem 1rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:190px; resize:vertical; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231C2331' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(28,35,49,.08); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:#9B2C2C; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.92rem; color:var(--muted); margin:0; }
.form-note[data-state="error"]{ color:#9B2C2C; }
.form-note[data-state="ok"]{ color:var(--ink); }
.consent{ display:flex; gap:.8rem; align-items:flex-start; font-size:.92rem; color:var(--body); }
.consent input{ width:auto; margin-top:.4rem; flex:none; accent-color:var(--ink); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Contact blocks ---------- */
.info + .info{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--rule); }
.info h4{ margin-bottom:.7rem; }
.info address{ font-style:normal; font-size:1.02rem; line-height:1.65; color:var(--body); }
.info a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule); }
.info a:hover{ text-decoration-color:var(--ink); }
.info p{ font-size:.96rem; }

/* Placeholder marker for anything the firm still has to supply */
.tbc{ background:#EFEAE1; border-bottom:1px dotted #B9AE99; padding:0 .2em; font-style:normal; }

/* ---------- Offices ---------- */
.offices{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,3.2vw,48px); }
@media (max-width:860px){ .offices{ grid-template-columns:1fr; } }
.office h4{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.office address{ font-style:normal; font-family:var(--serif); font-size:1.3rem; line-height:1.5;
  color:var(--ink); margin-bottom:1.1rem; }
.office-contact{ font-size:.96rem; margin-bottom:1.8rem; }
.office-contact a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule); }
.office-contact a:hover{ text-decoration-color:var(--ink); }
.offices .mapframe iframe{ height:clamp(240px,24vw,320px); }

/* ---------- Map ---------- */
.mapframe{ border:1px solid var(--rule); }
.mapframe iframe{ display:block; width:100%; height:clamp(320px,40vw,470px); border:0;
  filter:grayscale(1) contrast(1.05); }
.mapcap{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; justify-content:space-between;
  align-items:center; padding:1rem 1.2rem; border-top:1px solid var(--rule); font-size:.9rem;
  color:var(--muted); }
.mapcap a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule); }

/* ---------- Footer ---------- */
.foot{ background:var(--ink); color:var(--foot-link); padding-block:clamp(56px,6vw,88px) 0; }
.foot-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(30px,4vw,60px); }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr; } }
.foot-brand .name{ font-family:var(--serif); font-size:1.6rem; font-weight:700; color:#FFFFFF;
  display:block; margin-bottom:1.1rem; letter-spacing:-.01em; }
.foot-brand img{ height:34px; width:auto; margin-bottom:1.1rem; }
.foot-brand p{ color:var(--foot-link); max-width:38ch; margin:0; }
.foot-brand .foot-offices{ margin-top:.9rem; color:var(--muted); font-size:.88rem;
  letter-spacing:.06em; }
.office-label{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.foot h4{ font-family:var(--sans); font-size:.78rem; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:1rem; }
.foot a{ color:var(--foot-link); text-decoration:none; }
.foot a:hover{ color:#FFFFFF; }
.foot-legal{ margin-top:clamp(44px,5vw,72px); padding:2rem 0 0; border-top:1px solid var(--foot-rule);
  color:var(--muted); font-size:.94rem; }
.foot-legal p{ max-width:92ch; }
.foot-base{ display:flex; flex-wrap:wrap; gap:.5rem 1.8rem; justify-content:space-between;
  padding:1.6rem 0 2.4rem; font-size:.88rem; color:var(--muted); }

/* ---------- Accessibility ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--ink); color:#fff;
  padding:.8rem 1.2rem; text-decoration:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- Motion (scoped to .js so nothing hides without scripts) ---------- */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal{ opacity:1; transform:none; }
}