/* ============================================================
   C. APOKIDES LLC
   Shared stylesheet. Edit colours and type here only.
   ============================================================ */

:root{
  --ink:#3A352C;
  --copper:#A0613E;
  --stone:#8A8378;
  --paper:#F6F2EA;
  --shell:#E7E0D4;
  --text-2:#5C554A;
  --line:rgba(58,53,44,.16);
  --line-cu:rgba(160,97,62,.32);
  --line-lt:rgba(246,242,234,.16);

  --dsp:"Playfair Display",Georgia,serif;
  --body:"EB Garamond",Georgia,serif;
  --mono:"Space Mono",monospace;

  --wrap:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--dsp);font-weight:500;line-height:1.14;letter-spacing:-.005em}
a{color:inherit}
p+p{margin-top:1em}
img{max-width:100%;display:block}

/* ---- the seal: the ring from the wordmark, reused as system marker ---- */
.seal{
  display:inline-block;width:11px;height:11px;flex:0 0 11px;
  border:1.5px solid var(--copper);border-radius:50%;position:relative;
}
.seal::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:3px;border-radius:50%;background:var(--copper);
}

/* ---- logo: always the supplied file, never re-typeset ---- */
.logo{display:block;line-height:0;flex:0 0 auto}
.logo img{width:160px;height:auto}
footer .logo img{width:150px}

/* ---- eyebrow ---- */
.eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--copper);
  display:flex;align-items:center;gap:11px;margin-bottom:24px;
}
.eyebrow .bar{height:1px;flex:1;background:var(--line);max-width:90px}

/* ---- header ---- */
header{
  position:sticky;top:0;z-index:60;background:rgba(246,242,234,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:22px;height:96px}
nav{display:flex;gap:30px}
nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--stone);padding-bottom:3px;border-bottom:1px solid transparent;
}
nav a:hover{color:var(--ink);border-color:var(--copper)}
nav a[aria-current="page"]{color:var(--ink);border-color:var(--copper)}
.lang{display:flex;gap:6px;align-items:center}
.lang a,.lang button{text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  background:none;border:0;color:var(--stone);cursor:pointer;padding:4px 2px;
}
.lang a[aria-current="true"],.lang button[aria-pressed="true"]{color:var(--copper);border-bottom:1px solid var(--copper)}
.lang .sep{color:var(--line);font-size:11px}
@media(max-width:900px){nav{display:none}}

/* ---- hero ---- */
.hero{padding:118px 0 92px}
.hero h1{font-size:clamp(33px,4.7vw,55px);max-width:20ch}
.hero h1 em{font-style:italic;color:var(--copper)}
.lede{font-size:clamp(18px,1.9vw,21px);color:var(--text-2);max-width:52ch;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:15px 28px;display:inline-block;transition:.2s;border:1px solid;
}
.btn-1{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-1:hover{background:var(--copper);border-color:var(--copper)}
.btn-2{border-color:var(--line);color:var(--ink)}
.btn-2:hover{border-color:var(--copper);color:var(--copper)}
@media(max-width:900px){.hero{padding:66px 0 56px}}

/* page hero, shorter, for inner pages */
.hero-sm{padding:84px 0 62px}
.hero-sm h1{font-size:clamp(31px,4.2vw,48px);max-width:22ch}

/* ---- sections ---- */
section{padding:92px 0;border-top:1px solid var(--line)}
.sec-head{max-width:58ch;margin-bottom:54px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px)}
.sec-head p{margin-top:20px;color:var(--text-2)}
.more{
  display:inline-flex;align-items:center;gap:10px;margin-top:40px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--copper);border-bottom:1px solid var(--line-cu);padding-bottom:5px;
}
.more:hover{border-color:var(--copper)}

/* ---- intro row (photo + short bio) ---- */
.intro{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.portrait{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:var(--shell);
  border:1px solid var(--line);
}
.portrait-ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);padding:20px;line-height:2;
}
.intro h2{font-size:clamp(25px,3.2vw,34px)}
.intro .rl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);margin-top:10px;
}
.intro p{margin-top:22px;color:var(--text-2)}
@media(max-width:820px){.intro{grid-template-columns:1fr;gap:34px}.portrait{max-width:260px}}

/* ---- "what comes up" list ---- */
.comes{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.comes .item{
  display:flex;align-items:flex-start;gap:15px;
  padding:19px 0;border-bottom:1px solid var(--line);
}
.comes .item span:last-child{font-size:17.5px;line-height:1.5}
.comes .seal{margin-top:9px}
@media(max-width:820px){.comes{grid-template-columns:1fr}}

/* ---- commitments ---- */
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 52px}
.commit .c h3{font-size:19.5px;line-height:1.3}
.commit .c p{font-size:16px;color:var(--text-2);margin-top:11px}
.commit .c .top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.commit .c .no{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--copper)}
@media(max-width:900px){.commit{grid-template-columns:1fr 1fr;gap:38px 40px}}
@media(max-width:640px){.commit{grid-template-columns:1fr}}

/* ---- practice areas ---- */
.pa{border-top:1px solid var(--line)}
.pa .row{
  display:grid;grid-template-columns:56px 300px 1fr;gap:30px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:start;
}
.pa .no{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--copper);padding-top:8px}
.pa h3{font-size:23px}
.pa ul{list-style:none}
.pa li{
  font-size:16.5px;color:var(--text-2);padding:4px 0;
  display:flex;align-items:baseline;gap:12px;
}
.pa li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-cu);flex:0 0 5px}
@media(max-width:880px){
  .pa .row{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .pa .no{padding-top:0}
}

/* ---- about body ---- */
.longform{max-width:62ch}
.longform h2{font-size:clamp(24px,3vw,33px);margin:56px 0 22px}
.longform h2:first-child{margin-top:0}
.longform p{color:var(--text-2)}
.longform .pull{
  font-family:var(--dsp);font-size:clamp(22px,2.8vw,29px);color:var(--ink);
  line-height:1.32;border-left:1px solid var(--line-cu);padding-left:28px;margin:44px 0;
}

/* ---- credentials ---- */
.cv{list-style:none;border-top:1px solid var(--line);max-width:640px}
.cv li{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:19px 0;border-bottom:1px solid var(--line)}
.cv .yr{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--copper);padding-top:6px}
.cv .rl{font-family:var(--dsp);font-size:17.5px;line-height:1.3}
.cv .og{display:block;font-size:15px;color:var(--stone);margin-top:2px}
@media(max-width:600px){.cv li{grid-template-columns:1fr;gap:4px}}

/* ---- dark section (mirrors the card back) ---- */
.dark{background:var(--ink);color:var(--paper);border-top:0}
.dark .sec-head h2{color:var(--paper)}
.dark .sec-head p{color:#B5AC9E}
.dark .eyebrow{color:var(--copper)}
.dark .eyebrow .bar{background:var(--line-lt)}
.dark .more{color:var(--copper)}

.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.cline{
  border-top:1px solid var(--line-lt);padding:19px 0;
  display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:baseline;
}
.cline .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.cline .v{font-size:17px}
.cline a{text-decoration:none;border-bottom:1px solid rgba(160,97,62,.5)}
.cline a:hover{color:var(--copper)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:30px}}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--stone);padding:0 0 52px;font-size:14px}
footer .inner{
  border-top:1px solid var(--line-lt);padding-top:30px;
  display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;
}
footer p{max-width:62ch;line-height:1.6}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{color:var(--stone)}
footer nav a:hover{color:var(--paper)}

:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---- practice: one-line tag under each area title ---- */
.pa .tag{font-size:16px;font-style:italic;color:var(--text-2);margin-top:10px;line-height:1.5}

/* ---- private clients: set apart from the six business areas ---- */
.private{background:var(--shell)}
.private .pa{border-top:0}
.private .pa .row{border-bottom:0;padding-bottom:0}
.private .note{margin-top:36px;font-size:16px;color:var(--text-2);max-width:60ch;
  border-left:1px solid var(--line-cu);padding-left:20px}

/* ---- homepage: small line pointing to private clients ---- */
.also{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  font-size:17px;color:var(--text-2);max-width:70ch}
.also strong{font-family:var(--dsp);font-weight:500;color:var(--ink)}

/* ---- areas of law: traditional index for scanners and search ---- */
.law{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;border-top:1px solid var(--line)}
.law > span{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-size:17.5px;line-height:1.3}
@media(max-width:900px){.law{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.law{grid-template-columns:1fr}}

/* ---- homepage: one mono line of traditional areas ---- */
.lawline{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);line-height:2.1;max-width:90ch}

/* ---- homepage: traditional areas as clean inline items ---- */
.lawchips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:22px;max-width:960px}
.lawchips .lbl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-right:4px}
.lawchips .it{white-space:nowrap;font-size:16.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:10px}
.lawchips .it::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);flex:0 0 4px}

/* ---- homepage: lead area set apart from the rest of the company ---- */
.commit .c.lead{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:40px;margin-bottom:6px}
.commit .c.lead h3{font-size:clamp(24px,2.8vw,30px)}
.commit .c.lead p{font-size:17.5px;max-width:62ch}
.rest{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);grid-column:1/-1;margin-bottom:-18px}

/* ---- practice: the lead area row ---- */
.pa .row.lead h3{font-size:27px}

/* ---- footer: company details and privacy ---- */
footer .legal{font-size:13px;color:var(--stone);flex:0 0 100%;max-width:none;padding-right:calc(100% - 82ch)}
footer .legal + .legal{margin-top:-22px}
@media(max-width:900px){footer .legal{padding-right:0}}

/* ---- privacy page ---- */
.policy h2{font-size:clamp(21px,2.4vw,25px);margin:44px 0 14px}
.policy h2:first-child{margin-top:0}
.policy ul{margin:10px 0 0 20px;color:var(--text-2)}
.policy li{margin-top:6px}
@media(max-width:900px){.bar-row{height:80px}.logo img{width:140px}}