/* Self-hosted webfonts. No request leaves the visitor's browser for a third party. */
  /* greek-ext */ /* One rule per family, style and subset. The woff2 files are variable
   (Literata wght 400-900, Inter 100-900) and the per-weight files are
   byte identical, so naming a weight range here serves every weight the
   site uses from one download instead of one per weight. Do not split
   these back out: it costs 131 KB a page and changes nothing on screen. */
@font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
@font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
@font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* The language switch is the only Greek on an English page, and rendering
   two words in the brand face pulled two whole Greek subsets, 51 KB, onto
   every one of the 189 English pages whose prose has no Greek in it. The
   labels take the device's own UI face instead. Greek letters that appear
   inside English prose, the statutory 65B and 44IH, carry no lang attribute
   and are unaffected: on those 56 pages the subset still loads, correctly. */
html[lang="en"] [lang="el"]{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
:root{--s6:clamp(48px,4.4vw,72px);--s7:clamp(64px,6vw,96px);--s8:clamp(88px,8vw,128px);
    --hero1:#1A1816; --hero2:#0D0C0B;
    --paper:#FAFAF9; --paper2:#F2F1EF;
    --ink:#1A1817; --body:#423D39; --mute:#554F49;
    --line:rgba(26,24,23,.14); --hair:rgba(26,24,23,.08);
    --accent:#8C4F30; --accent-lt:#D4967D;
    --link:#8C4F30; --link-hover:#6E4630; --link-visited:#A9643F;
    --onDark:#F2F3F4; --onDarkMute:rgba(242,243,244,.74); --onDarkLine:rgba(242,243,244,.14);
    --serif:"Literata",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
    --w:1220px; --gut:clamp(24px,5vw,64px); --r:4px; --measure:68ch;
    color-scheme:light;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:linear-gradient(180deg,var(--hero1),var(--hero2)) fixed;
    color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.8;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
  a{color:inherit}
  ::selection{background:var(--accent-lt);color:var(--ink)}
  #plan{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
  .label{font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.24em;
    color:var(--accent);margin:0 0 20px;display:flex;gap:14px;align-items:center}
  .label i{width:28px;height:1px;background:currentColor;flex:none}
  /* header */
  .top{position:relative;z-index:1;color:var(--onDark)}
  .top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 130% at 22% 30%,rgba(13,12,11,.88),rgba(13,12,11,.42) 62%,transparent)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:84px;
    border-bottom:1px solid var(--onDarkLine)}
  .mark{display:flex;align-items:center;margin-right:40px;font-family:var(--serif);font-size:19px;text-decoration:none;color:var(--onDark)}
  .nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
  .nav ul a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:rgba(242,243,244,.92)}
  .nav ul a:hover{color:var(--onDark)}
  .navcta{margin-left:14px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
    text-decoration:none;color:var(--onDark);border:1px solid var(--onDarkLine);
    padding:12px 20px;border-radius:var(--r);white-space:nowrap}
  .navcta:hover{border-color:var(--accent-lt);color:var(--accent-lt)}
  /* ---------- Mobile drawer ---------- */
  .burger{display:none;background:none;border:1px solid var(--onDarkLine);border-radius:var(--r);
    width:46px;height:40px;position:relative;cursor:pointer}
  .burger span{position:absolute;left:11px;right:11px;height:1px;background:var(--onDark);
    transition:transform .22s,top .22s,bottom .22s}
  .burger span:nth-child(1){top:15px} .burger span:nth-child(2){bottom:15px}
  .burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){bottom:20px;transform:rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}
  .drawer{position:fixed;inset:0;z-index:80;background:var(--hero2);
    padding:96px var(--gut) 40px;display:flex;flex-direction:column;
    transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s;
    overflow-y:auto}
  .drawer[data-open="true"]{transform:none;visibility:visible}
  .drawer a{font-family:var(--serif);font-size:clamp(24px,6.4vw,38px);color:var(--onDark);
    text-decoration:none;padding:15px 0;border-bottom:1px solid var(--onDarkLine)}
  .drawer a:last-of-type{border-bottom:0}
  .drawer a:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}
  .drawer .close{position:absolute;top:26px;right:var(--gut);background:none;border:0;
    color:var(--onDarkMute);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
  .drawer .close::after{content:"";position:absolute;inset:-14px -12px}
  @media(max-width:1023px){.nav ul{display:none}.navcta{display:none}.burger{display:block}}
  @media(min-width:1024px){.drawer{display:none}}
  .masthead{padding-top:var(--s8);padding-bottom:var(--s6)}
  .crumb{font-size:12px;color:var(--onDarkMute);margin:0 0 26px}
  .crumb a{text-decoration:none;border-bottom:1px solid var(--onDarkLine)}
  .masthead h1{font-family:var(--serif);font-weight:400;color:var(--onDark);
    font-size:clamp(40px,5.4vw,64px);line-height:1.06;letter-spacing:-.018em;
    margin:0 0 26px;max-width:22ch}
  .byline{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;color:var(--onDarkMute);
    padding-top:22px;border-top:1px solid var(--onDarkLine)}
  .byline b{color:var(--onDark);font-weight:500}
  /* body */
  .sheet{position:relative;z-index:1;background:var(--paper)}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;
    gap:clamp(30px,5vw,72px);padding:var(--s6) 0 var(--s7)}
  @media(max-width:1000px){.cols{grid-template-columns:minmax(0,1fr)}}
  .article{max-width:var(--measure)}
  .article h2{font-family:var(--serif);font-weight:400;color:var(--ink);
    font-size:clamp(24px,2.4vw,33px);line-height:1.2;letter-spacing:-.010em;
    margin:54px 0 16px;scroll-margin-top:96px}
  .article h3{font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:0;
    margin:36px 0 12px;scroll-margin-top:96px}
  .article p{margin:0 0 18px}
  .article strong{font-weight:600;color:var(--ink)}
  .article ul,.article ol{margin:0 0 18px;padding-left:1.3em}
  .article li{margin-bottom:9px}
  .article li::marker{color:var(--accent)}
  .article a.link{color:var(--link);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px}
  .article a.link:visited{color:var(--link-visited)}
  .article a.link:hover{color:var(--link-hover);text-decoration-thickness:2px}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  .quick{background:var(--paper2);border-left:3px solid var(--accent);
    padding:clamp(22px,3vw,30px);border-radius:0 var(--r) var(--r) 0;margin:0 0 40px}
  .quick p{margin:0}.quick .k{display:block;font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:8px}
  .steps{list-style:none;counter-reset:s;padding:0;margin:0 0 18px}
  .steps li{counter-increment:s;position:relative;padding-left:2.6em;margin-bottom:14px}
  .steps li::before{content:counter(s);position:absolute;left:0;top:.1em;
    font-family:var(--serif);color:var(--accent);font-size:15px;
    width:1.8em;text-align:left;border-bottom:1px solid var(--accent);padding-bottom:2px}
  .faq{margin-top:14px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--hair)}
  .faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
    font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);color:var(--ink);line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:4px;top:17px;color:var(--accent);font-family:var(--sans);font-size:20px;line-height:1;transition:transform .3s ease}.faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .faq p{padding:0 0 20px;margin:0;max-width:62ch}
  .signoff{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);
    display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
  .signoff img{width:76px;height:100px;object-fit:cover;object-position:50% 20%;
    border-radius:var(--r);flex:none}
  .signoff h4,.signoff h3.h4,.signoff h2.h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 2px}
  .signoff .role{font-size:10.5px;font-weight:500;text-transform:uppercase;
    letter-spacing:.18em;color:var(--mute);margin:0 0 12px}
  .signoff p{margin:0;font-size:15.5px;max-width:52ch}
  .contactbox{margin-top:40px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r)}
  .contactbox h4,.contactbox h3.h4,.contactbox h2.h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin:0 0 12px}
  .contactbox p{margin:0 0 8px;font-size:15.5px}
  .disclaimer{margin-top:34px;font-size:13.5px;color:var(--mute);font-style:italic;max-width:62ch}
  /* aside */
  .aside{position:sticky;top:26px;align-self:start;font-size:14px}
  @media(max-width:1000px){.aside{position:static;order:-1;margin-bottom:42px;border-bottom:1px solid var(--line);padding-bottom:30px}}
  .aside h5,.aside h3.h5{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
    color:var(--mute);margin:0 0 16px}
  .aside ol{list-style:none;margin:0 0 30px;padding:0;counter-reset:toc}
  .aside li{counter-increment:toc;margin-bottom:2px}
  .aside a{display:block;text-decoration:none;color:var(--mute);padding:6px 0 6px 30px;
    position:relative;line-height:1.45;border-left:1px solid var(--hair);transition:.2s}
  .aside a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:12px;
    font-size:11px;color:var(--accent);opacity:.65}
  .aside a:hover,.aside a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent)}
  .progress{height:2px;background:var(--hair);border-radius:2px;overflow:hidden;margin-bottom:26px}
  .progress i{display:block;height:100%;width:0;background:var(--accent)}
  .footwrap{position:relative;z-index:1;background:var(--paper)}
  footer{padding:54px 0;border-top:1px solid var(--line);color:var(--mute);font-size:13.5px}
  .fbar{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .note{font-size:12px;color:var(--mute);max-width:74ch;margin-top:18px;line-height:1.6}
  .flag{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--accent);color:#fff;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;
    text-decoration:none;border-radius:var(--r)}
  .skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);
    padding:12px 18px;z-index:99;border-radius:var(--r)}
  .skip:focus{left:12px;top:12px}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media print{
    body{background:#fff;color:#000;font-size:11pt}#plan, .aside, .flag, .nav, .skip{display:none}
    .top::after{display:none}
    .top,.masthead h1,.byline{color:#000}
    .cols{grid-template-columns:minmax(0,1fr);padding:0}
    .article{max-width:none}
    .article a.link{color:#000;text-decoration:underline}
    .article a.link[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
    .article h2,.article h3{break-after:avoid;page-break-after:avoid}
    .quick,.contactbox,.signoff,details{break-inside:avoid;page-break-inside:avoid}
    details[open] p, details p{display:block!important}
    p,li{orphans:3;widows:3}
    @page{margin:18mm}
  }
/* sticky masthead, larger navigation type */
.top{background:var(--ink)}
.nav ul a{font-size:12px}
.nav ul{gap:20px}
.navcta{font-size:12.5px}
.mark{font-size:17px}
@media(max-width:900px){.nav ul a{font-size:12px}}
.mark .lk{display:inline-flex;align-items:center;gap:8px}.mark .lk img{height:16px;width:auto;display:block}.mark .rule{width:1px;height:22px;background:rgba(242,243,244,.28)}.mark .nm{font-family:var(--serif);font-weight:500;font-size:12.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}.mark .nm .llc{font-size:68%;letter-spacing:.09em}@media(max-width:1180px){.mark .lk{gap:7px}.mark .lk img{height:14px}.mark .nm{font-size:11.5px}.mark .rule{height:19px}}
.footmark{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;text-decoration:none}.footmark img{height:17px;width:auto;display:block}.frule{width:1px;height:23px;background:rgba(26,24,23,.22)}.fnm{font-family:var(--serif);font-weight:500;font-size:13px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}.fnm .llc{font-size:68%;letter-spacing:.09em}
@media(max-width:760px){.mark .lk{gap:6px}.mark .lk img{height:13px}.mark .nm{font-size:10.5px}.mark .rule{height:17px}.footmark{gap:8px}.footmark img{height:14px}.fnm{font-size:11px}.frule{height:19px}}
.railcard{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.railcard .k{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);margin:0 0 14px}
.railcard .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.railcard img{width:44px;height:56px;object-fit:cover;object-position:50% 18%;border-radius:var(--r);flex:none}
.railcard .nm{font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.2}
.railcard .rl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.railcard p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 8px}
.railcard a{display:inline;padding:0;border-left:0;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--hair)}
.railcard a::before{content:none}
@media(max-width:1000px){.railcard{display:none}}
@media(min-width:1100px){
  .article{counter-reset:sec}
  .article h2[id]{counter-increment:sec;position:relative}
  .article h2[id]::before{content:counter(sec,decimal-leading-zero);position:absolute;left:-56px;top:14px;
    font-family:var(--serif);font-size:13px;letter-spacing:.04em;color:var(--accent)}
}
.figs{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:15px}
.figs td{padding:11px 0;border-top:1px solid var(--hair)}
.figs td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.figs td.note{font-size:12.5px;color:var(--mute);white-space:normal;text-align:left}
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
@media (forced-colors: active){
    .btn,.navcta{border:1px solid ButtonText}
    .burger span{background:ButtonText}
  }
.checklist{list-style:none;margin:0;padding:0}.checklist li{position:relative;padding:11px 0 11px 24px;margin:0;font-size:16px;border-bottom:1px solid var(--hair)}.checklist li:last-child{border-bottom:0}.checklist li::before{content:"";position:absolute;left:0;top:calc(.62em + 11px);width:9px;height:1px;background:var(--accent)}
.sumlab{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:26px 0 12px;display:flex;align-items:center;gap:12px}.sumlab::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;padding:16px 28px;border-radius:var(--r);background:var(--accent);color:var(--paper);text-decoration:none}
.btn:hover{background:#A05B38}
.drawer .drawer-cta{font-family:var(--sans);font-size:11.5px;line-height:1.2;letter-spacing:.16em;padding:17px 22px;border-bottom:0;display:block;margin-top:26px;color:var(--paper);text-align:center}
.arealist{border-top:1px solid var(--hair);counter-reset:ar;padding-left:64px}.arealist h3.mid{counter-increment:ar;position:relative;padding-top:28px;margin:0}.arealist h3.mid::before{content:counter(ar,decimal-leading-zero);position:absolute;left:-64px;top:34px;font-family:var(--serif);font-size:13px;color:var(--accent)}.arealist p{margin:10px 0 0;padding-bottom:28px;border-bottom:1px solid var(--hair);max-width:76ch}@media(max-width:760px){.arealist{padding-left:36px}.arealist h3.mid::before{left:-36px;top:32px}}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,5vw,64px);padding-bottom:44px;border-bottom:1px solid var(--hair)}.fgrid h3,.fgrid h4,.fgrid .h4{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink);margin:0 0 16px}.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li{margin-bottom:9px}.fgrid a{text-decoration:none;color:var(--mute)}.fgrid a:hover{color:var(--accent)}@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
@media(max-width:1180px){.nav ul{gap:16px}.nav ul a{font-size:11px}.navcta{font-size:10px;padding:10px 13px;letter-spacing:.13em}}
@media(max-width:1280px){html[lang=el] .nav ul{gap:12px}html[lang=el] .nav ul a{font-size:11px;letter-spacing:.05em}html[lang=el] .navcta{font-size:10px;padding:10px 11px;letter-spacing:.07em;margin-left:10px}}
.article{max-width:60ch}h1,h2,h3,.big,.mid{text-wrap:balance}p, li, .stand{text-wrap:pretty}.checklist li::before{top:calc(.62em + 11px)}
.article h2{margin:78px 0 16px}
.article .keyline{font-family:var(--serif);font-size:clamp(20px,2vw,25px);line-height:1.42;color:var(--ink);border-left:2px solid var(--accent);padding:2px 0 2px 24px;margin:46px 0}.article h3{margin:40px 0 10px}.quick{background:none;border-left:2px solid var(--accent);border-radius:0;padding:2px 0 2px 24px;margin-left:-26px;max-width:62ch}.quick .k{display:block;font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:8px}@media(max-width:900px){.quick{margin-left:0}}.byline{gap:0 10px;align-items:baseline}.byline > * + *::before{content:"\00b7";margin-right:10px;color:var(--onDarkLine)}.checklist li::before{top:calc(.7em + 11px)}
.toc-fold{margin:0}.toc-fold > summary{list-style:none;cursor:pointer;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);padding:8px 0}.toc-fold > summary::-webkit-details-marker{display:none}.toc-fold > summary::after{content:"+";float:right;color:var(--accent);font-size:14px;line-height:1}.toc-fold[open] > summary::after{content:"\2212"}.toc-fold[open] > summary{margin-bottom:8px}
.linklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}.linklist li{margin:0}.linklist a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-top:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:16.5px}.linklist li:last-child a{border-bottom:1px solid var(--hair)}.linklist a::after{content:"\2192";color:var(--accent);flex:none}.linklist a:hover{color:var(--accent)}
section{padding:var(--s7) 0}
/* --- conversion: mobile action bar + article CTA line --- */
.ctaline{border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:18px 0 6px;font-size:15px;color:var(--body)}
.ctaline a{color:var(--link)}
.actbar{display:none}
@media(max-width:760px){
  .actbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--ink);
    padding-bottom:env(safe-area-inset-bottom);border-top:2px solid var(--accent-lt);
    box-shadow:0 -10px 28px rgba(26,24,23,.22)}
  .actbar a{flex:1;display:block;text-align:center;padding:16px 4px 15px;color:#FAFAF9;text-decoration:none;
    font:500 13.5px/1 var(--sans);letter-spacing:.05em}
  .actbar a+a{border-left:1px solid rgba(250,250,249,.16)}
  .actbar a b{font-weight:500}
  body:has(.actbar){padding-bottom:calc(50px + env(safe-area-inset-bottom))}
}
/* --- byline: stack on narrow screens so wrapped lines stay flush left --- */
@media(max-width:760px){
  .byline{flex-direction:column;align-items:flex-start;gap:5px 0}
  .byline > * + *::before{content:none}
}
/* ---------- Dark footer, 18 August 2026 ----------
   The page now closes on the same ink it opens on. The office has its own
   column with a map link, and the small print sits on one row across the full
   width instead of stacked in a narrow left column. */
.footwrap{background:var(--ink)}
footer{border-top:0;color:var(--onDarkMute)}
.fnm{color:var(--onDark)}
.frule{background:rgba(242,243,244,.28)}
.fgrid{grid-template-columns:1.5fr .85fr 1.15fr 1.05fr;border-bottom:1px solid rgba(242,243,244,.12)}
/* Five columns where the page carries the fixed fee services list. */
.fgrid:has(> div:nth-child(5)){grid-template-columns:1.25fr .75fr .95fr 1.05fr .95fr;
  gap:clamp(20px,3vw,44px)}
@media(max-width:1080px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr}}
.fgrid h3,.fgrid h4,.fgrid .h4{color:var(--onDark)}
.fgrid a{color:var(--onDarkMute)}
.fgrid a:hover{color:var(--accent-lt)}
.fdesc{max-width:38ch;margin:0}
.faddr{font-style:normal;margin:0;line-height:1.75}
.fmapline{margin:12px 0 0}
.fmap{color:var(--accent-lt);text-decoration:none;border-bottom:1px solid rgba(212,150,125,.35);
  padding-bottom:1px}
.fmap:hover{border-bottom-color:var(--accent-lt)}
.fhrs{margin:12px 0 0;font-size:12.5px;color:rgba(242,243,244,.7)}
.nb{white-space:nowrap}
.fbar{display:block;margin-top:30px}
.footwrap .note{color:rgba(242,243,244,.7);max-width:74ch;margin:0 0 18px}
.fends{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px clamp(18px,3vw,44px);flex-wrap:wrap}
.fends .reg{margin:0;font-size:12.5px;color:rgba(242,243,244,.7)}
.fends .flang{margin-left:auto}
.fends a{color:rgba(242,243,244,.74);text-decoration:none;
  border-bottom:1px solid rgba(242,243,244,.22);padding-bottom:1px}
.fends a:hover{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}
  .fends{flex-direction:column;align-items:flex-start;gap:12px}
  .fends .flang{margin-left:0}}
@media(max-width:760px){footer{padding-bottom:78px}}
/* ---- The touch layer, 19 August 2026. Additive only: motion on the elements
   that answer the pointer, stillness for those who asked for it. ---- */
html{scroll-behavior:smooth}
.btn{transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,24,23,.18)}
.btn:active{transform:none;box-shadow:0 3px 10px rgba(26,24,23,.14)}
.navcta{transition:border-color .22s ease,color .22s ease}
.art h3,.art h4,.art .h4,.tl-item h3 a{transition:color .22s ease}
td,th{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* ---- polish v3: selection, focus ring, scrollbar, quiet depth ---- */
::selection{background:rgba(140,79,48,.16)}
html{scrollbar-width:thin;scrollbar-color:rgba(140,79,48,.35) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,79,48,.3);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(140,79,48,.5)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
body{-webkit-tap-highlight-color:transparent}
summary{cursor:pointer}
.top{background-image:radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)}
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.05))}
/* ---- polish v4: the showpieces. Footer wordmark, grain, drawn underlines ---- */
.top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
  radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)}
.nav ul a{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 calc(100% - 1px);
  transition:background-size .3s ease,color .2s ease}
.nav ul a:hover{background-size:100% 1px}
body{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0}}
/* ---- polish v5: the touches you meet every visit ---- */
details summary{transition:color .2s ease}
details summary:hover{color:var(--accent)}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details[open] .a{animation:ansIn .35s ease}
@keyframes ansIn{from{opacity:0;transform:translateY(-4px)}}
.drawer a{opacity:0;transform:translateY(14px);
  transition:transform .5s cubic-bezier(.2,.6,.2,1),opacity .5s ease}
.drawer[data-open="true"] a{opacity:1;transform:none}
.drawer[data-open="true"] a:nth-of-type(2){transition-delay:.05s}
.drawer[data-open="true"] a:nth-of-type(3){transition-delay:.09s}
.drawer[data-open="true"] a:nth-of-type(4){transition-delay:.13s}
.drawer[data-open="true"] a:nth-of-type(5){transition-delay:.17s}
.drawer[data-open="true"] a:nth-of-type(6){transition-delay:.21s}
.drawer[data-open="true"] a:nth-of-type(7){transition-delay:.25s}
.drawer[data-open="true"] a:nth-of-type(8){transition-delay:.29s}
.drawer[data-open="true"] a:nth-of-type(9){transition-delay:.33s}
.drawer[data-open="true"] a:nth-of-type(10){transition-delay:.36s}
.invite{border-top:1px solid rgba(212,150,125,.16)}
/* ---- polish v6: the expensive pass, 21 August 2026. Materials rather than
   ornament: a copper seam where the paper meets the ink, the monogram set
   into the footer like a maker's stamp, page-to-page continuity, a composed
   entrance for the article head, a reading thread along the top edge, and
   proper clothes for tables, quotations, rules, and the printed page. ---- */
html{text-rendering:optimizeLegibility;font-kerning:normal}
:target{scroll-margin-top:96px}
/* Page-to-page continuity. Browsers that can cross-fade whole documents do,
   and the body fade steps aside there so the two effects do not stack. */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.22s}
::view-transition-new(root){animation-duration:.22s}
@supports (view-transition-name:root){body{animation:none}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* The article head arrives composed: label, headline, byline, each a beat
   behind the one before. Opacity and transform only; nothing reflows. */
@media (prefers-reduced-motion:no-preference){
  .masthead .label{animation:mastIn .55s cubic-bezier(.2,.6,.2,1) both}
  .masthead h1{animation:mastIn .65s cubic-bezier(.2,.6,.2,1) .07s both}.masthead .stand, .masthead .byline{
    animation:mastIn .7s cubic-bezier(.2,.6,.2,1) .15s both}
}
@keyframes mastIn{from{opacity:0;transform:translateY(12px)}}
/* The reading thread: a copper line along the top edge that measures the
   article as it is read. Browsers without scroll timelines see nothing. */
@supports (animation-timeline: scroll()){
  body::after{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:75;
    background:linear-gradient(90deg,var(--accent),var(--accent-lt));
    transform-origin:0 50%;transform:scaleX(0);
    animation:readline linear both;animation-timeline:scroll(root)}
  @keyframes readline{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}
/* The seam: where the paper sheet meets the ink above it, a thread of copper
   light; and a hairline between the invite and the footer, which sat on the
   same ink with no edge. */
.sheet{box-shadow:0 -1px 0 rgba(212,150,125,.22)}
.footwrap{border-top:1px solid rgba(242,243,244,.07)}
/* Buttons carry an inner light along the top edge, the way lacquer catches
   it, kept through the hover and dimmed on the press. */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(26,24,23,.18)}
.btn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 10px rgba(26,24,23,.14)}
.navcta{transition:border-color .22s ease,color .22s ease,background-color .22s ease}
.navcta:hover{background:rgba(212,150,125,.07)}
/* The arrows answer the pointer. */
.linklist a::after{transition:transform .25s ease}
.linklist a:hover::after{transform:translateX(4px)}
/* Portraits sit on the page like mounted plates: a hairline edge and a
   shadow that falls away, not a glow. */
.lead img{box-shadow:0 0 0 1px var(--hair),0 16px 30px -22px rgba(26,24,23,.55)}
/* Any table in the running text sits on the same hairlines as everything
   else. A table with its own finish, like .figs, keeps it; this is the floor. */
table{border-collapse:collapse}
.article table{width:100%;margin:26px 0;font-size:15.5px;line-height:1.6}
th{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);text-align:left;padding:10px 20px 10px 0;
  border-bottom:1px solid var(--line)}
td{padding:11px 20px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
/* A quotation is set in the serif on the copper spine the keyline wears. */
blockquote{margin:32px 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--ink)}
blockquote p{max-width:52ch}
blockquote p:last-child{margin-bottom:0}
cite{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
/* A rule in running text is short, copper and quiet, not a fence. */
.article hr{border:0;width:56px;height:1px;background:var(--accent);
  margin:44px 0;opacity:.6}
.article figure{margin:32px 0}
.article figure img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
figcaption{font-size:13px;color:var(--mute);margin-top:10px}
/* The printed page: chrome off, ink on white, the letterhead voice. Clients
   print advice; the print should look like it came from the same firm. */
@media print{
  body{background:#fff!important;color:#1A1817;animation:none}
  body::after{display:none}
  #plan,.nav ul,.navcta,.burger,.drawer,.actbar,.flag,.skip,.invite,
  .toc-fold{display:none!important}
  .top,.sheet,.footwrap{background:#fff!important;box-shadow:none}
  .top::after,.top::before{display:none}
  .top{color:#1A1817}
  .nav{border-bottom-color:rgba(26,24,23,.2)}
  .mark,.mark .nm{color:#1A1817}
  .mark .lk img{filter:invert(1)}
  .mark .rule{background:rgba(26,24,23,.3)}
  .masthead h1{color:#1A1817}.masthead .stand{color:#423D39}
  .byline{color:#6E6862;border-top-color:rgba(26,24,23,.2)}
  .byline b{color:#1A1817}
  footer{color:#6E6862;border-top:1px solid rgba(26,24,23,.2)}
  .footmark img{filter:invert(1)}
  .fnm{color:#1A1817}
  .frule{background:rgba(26,24,23,.3)}
  .fgrid{border-bottom-color:rgba(26,24,23,.12)}
  .fgrid h3,.fgrid h4,.fgrid .h4{color:#1A1817}
  .fgrid a,.fends a,.note,.fends .reg,.fhrs{color:#6E6862}
  .fmap{color:#6E4630}
  a{text-decoration:none}
}
/* The intake widget is chrome too: never on the printed page. */
@media print{.k-b,.k-p{display:none!important}}
/* The footer listed seven fixed-fee services at the same weight as the firm
   itself, which reads as a practice that mainly sells packaged corporate
   products. The heading is now Services and this column is a size quieter.
   The links stay: three of those pages have no inbound link anywhere on the
   site except this column and /fixed-fees, so dropping them would take them
   out of the link graph to fix an impression. */
.fgrid .fsvc a{font-size:14px}
.fgrid .fsvc li{margin-bottom:7px}
/* A row of jumps to a long page's own sections. Deliberately plain: a label,
   then the headings, wrapping. No box, no numbers, no icons. It exists because
   101 pages of more than 1,200 words carried five or more headings and no
   wayfinding of any kind, which on a phone leaves the one section the reader
   wanted somewhere inside a wall of text. Written by tools/build-jumps.py. */
.jumps{display:flex;flex-wrap:wrap;gap:9px;
  margin:0 0 var(--s6);padding:20px 0 22px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  counter-reset:jmp}
.jumps > span{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);
  flex:0 0 100%;margin:0 0 7px}
.jumps a{counter-increment:jmp;display:inline-flex;align-items:baseline;gap:10px;
  max-width:100%;font-family:var(--sans);font-size:13.5px;line-height:1.45;
  color:var(--body);text-decoration:none;padding:10px 15px;
  border:1px solid var(--line);border-radius:var(--r);background:transparent;
  transition:color .22s ease,border-color .22s ease,background .22s ease,
    transform .22s ease,box-shadow .22s ease}
.jumps a::before{content:counter(jmp,decimal-leading-zero);flex:none;
  font-family:var(--serif);font-size:11.5px;color:var(--accent)}
.jumps a:hover{color:var(--ink);border-color:rgba(140,79,48,.4);
  background:rgba(140,79,48,.05);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(26,24,23,.07)}
.jumps a:active{transform:none;box-shadow:0 2px 7px rgba(26,24,23,.06)}
.jumps a:focus-visible{border-radius:var(--r)}
/* The row is navigation for what comes next, so it should sit closer to that
   than to what precedes it. Measured across the 99 pages that carry one: where
   the next thing is a .two or a heading the gap is 56px and reads correctly,
   but where it is a <section> the section brings its own 102px of padding on
   top of this margin and the row is left stranded above a void. Dropping the
   margin in that case alone brings 133px down to 77px, next to the 56px the
   other shape already had. */
.jumps:has(+ section){margin-bottom:0}
@media(max-width:640px){.jumps{gap:8px;padding:18px 0 20px}.jumps a{font-size:14px;padding:13px 14px;line-height:1.4}}
/* Measured on 25 August 2026: section padding on a 390px phone came out at
   0.74 of the same padding on a 1440px desktop. That is backwards. The
   spacing scale is clamp(64px,6vw,96px), so a wide screen takes the 6vw and
   a phone falls to the floor, and the phone is the screen where a paragraph
   runs to forty characters a line and needs the gap most to tell one section
   from the next.
   Raising the floor only under the phone breakpoint, rather than raising the
   clamp minimum, leaves every other width exactly as it was. */
@media(max-width:640px){:root{--s6:56px;--s7:80px;--s8:96px}}
/* A FAQ list needs air around its label.
   The section that introduces one is written as <section style="padding-top:0">,
   which is this site's idiom for a block that continues the one above it, and
   988 sections use it correctly: "Who leads this work" really does continue the
   page it follows. A FAQ does not continue anything. It is a new section, and
   with no top padding its eyebrow label sat 27 pixels under the edge of the
   block above and 22 pixels over the first question, which on a phone reads as
   cramped rather than as a beginning.
   Overriding an inline style needs !important, and that is the narrower change
   of the two available: the alternative is editing the same attribute in 91
   files and relying on whoever writes the next FAQ to remember. The selector is
   exact, an eyebrow label followed by a container whose own children are the
   questions, so no other section moves. */
section:has(> :is(p,h2,h3).label + div > details){padding-top:var(--s6)!important}
:is(p,h2,h3).label:has(+ div > details){margin-bottom:30px}
@media(max-width:640px){:is(p,h2,h3).label:has(+ div > details){margin-bottom:26px}}
/* A fact under an eyebrow, as against a row of chips.
   .areas is a flex row: an uppercase label, then links styled as pills. That
   is right for "Instructed on" and for "Writing", where every child really is
   a destination. It was also being used for two things that are prose, and
   flex does to prose what flex does: "Qualifications" put its label inline
   with a four-credential run that wrapped over five lines, and "The matters"
   turned an inline link into a pill in the middle of a sentence and left the
   full stop behind it as a flex item of its own, floating after the pill.
   So prose gets its own component. The label sits above as an eyebrow, the
   value reads as a sentence, and a link inside it is a link. */
.fact{margin-top:24px}
.fact .k{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:0 0 9px}
.fact p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body);max-width:58ch}
.fact p a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(140,79,48,.34);padding-bottom:1px;
  transition:border-color .2s ease}
.fact p a:hover{border-bottom-color:var(--accent)}
.creds{margin:0;padding:0;list-style:none;max-width:58ch}
.creds li{position:relative;padding-left:20px;margin:0 0 7px;
  font-size:15.5px;line-height:1.55;color:var(--body)}
.creds li:last-child{margin-bottom:0}
/* the same hairline the eyebrow labels use, at the scale of a list marker */
.creds li::before{content:"";position:absolute;left:0;top:.66em;
  width:9px;height:1px;background:var(--accent)}
/* "More on this": a row each, not a sentence.
   The strip was a comma separated list of article titles, and on a phone four
   of them ran together into seven lines of underlined text with no visible
   boundary between one title and the next. The separator could not do its job
   because article titles carry their own commas and colons: "When an AI System
   Causes Loss: Liability, Data Protection and Contracts" contains both.
   It was also styled on only some of the site. 264 pages had no .rel rule at
   all, so the strip inherited 17px body text and the default underline, which
   is where the wall came from; the other 163 had it at 15px in the muted grey.
   Hairline separated rows, with the arrow that .endlinks already uses and the
   same nudge on hover, so the boundary is the row itself. */
/* Scoped to nav.rel, which is what build-siblings.py writes. There are 171
   hand written <p class="rel"> lines elsewhere on the site, prose with inline
   links in it, and styling every .rel as a list turned each of those links
   into a full width row: "All our writing is on the / writing index / .
   Related: / Property / and / ..." one line at a time. The generated strip and
   a sentence are different things and only the strip is a list. */
nav.rel{margin-top:var(--s6);border-top:1px solid var(--line)}
nav.rel .k{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:20px 0 0}
nav.rel ul{list-style:none;margin:0;padding:0}
nav.rel li{border-bottom:1px solid var(--hair)}
nav.rel li:last-child{border-bottom:0}
nav.rel a{display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:15px 0;text-decoration:none;color:var(--body);
  font-size:16px;line-height:1.45;transition:color .2s ease}
nav.rel a span{flex:none;color:var(--accent);transition:transform .2s ease}
nav.rel a:hover{color:var(--accent)}
nav.rel a:hover span{transform:translateX(3px)}
@media(max-width:640px){nav.rel a{font-size:15.5px;padding:14px 0}}
/* the prose line these rules used to share, put back as it was */
p.rel{margin-top:26px;font-size:15px;color:var(--mute)}
p.rel a{color:var(--accent)}
/* A partner profile is not a continuation of the page above it.
   .person sits inside <main style="padding-top:var(--s7)"> on each partner's
   own page, which gives it 102px of air. On the team page and its Greek twin
   the same block sits inside <section style="padding-top:0">, the site's
   continuation idiom, and the measured gap between the intro heading and the
   top of the portrait was zero: the photograph began exactly where the
   sentence above it ended. Four sections across the two files. */
section:has(> .person){padding-top:var(--s7)!important}
/* The location line beside the page label.
   It carried no colour of its own, so it inherited --onDarkMute, which is
   .6 alpha. Composited on the masthead ink that is #9C9B9C, 6.39:1, and next
   to "ABOUT" in --accent-lt it reads as hazy rather than quiet: the two are
   the same size and tracking and should be peers.
   Matching the accent's contrast exactly would mean .65, and that is the
   wrong answer, because a warm mid tone carries presence a neutral grey does
   not and the label would still look washed. .8 gives #C7C7C8 at 10.47:1,
   clearly a peer, still short of the full white the headline uses.
   Set on .mmeta rather than on --onDarkMute, which is shared with the
   consultation block's body text and should not move. */
/* The location line beside the page label.
   It was written as .mmeta, which is 0,1,0, and .masthead p is 0,1,1, so on
   every page with a masthead none of it applied: not the absolute position in
   the corner, not the 11px, not the tracking, not the colour. It was rendering
   as an ordinary masthead paragraph at 16.64px in --onDarkMute, which is why
   it looked washed and why it sat in the flow rather than in the corner.
   Raised to .masthead .mmeta, 0,2,0, which wins. The colour goes to .8 at the
   same time: composited on the masthead ink that is #C7C7C8 at 10.47:1, so it
   reads as a peer of the page label beside it. Matching the accent's contrast
   exactly would be .65, and that is the wrong answer, because a warm mid tone
   carries presence a neutral grey does not. */
.masthead .mmeta{position:absolute;right:clamp(20px,4vw,56px);top:var(--s8);
  font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,243,244,.8);display:flex;align-items:center;gap:12px;margin:0;max-width:none}
/* And it stays off the phone, where it was always meant to be off. The rule
   that hid it reads .mmeta inside a media query; this one reads
   .masthead .mmeta and sits later in the file, so it won it twice over and
   the label had been showing at 320px on top of the breadcrumb. */
@media(max-width:1000px){.masthead .mmeta{display:none}}
/* Greek does not break. At 320px a single word like κατασκευαστικών is wider
   than the column it sits in, so it painted past the edge and pushed the whole
   document sideways. Fifteen pages did that, nearly all of them Greek, and the
   masthead heading and the breadcrumb label were where it showed. break-word
   acts only on a word that cannot fit on a line of its own, so ordinary text,
   English or Greek, is untouched. */
h1,h2,h3,h4,.label,.quick .k,summary{overflow-wrap:break-word}
/* And the breadcrumb above a masthead heading is a flex row of four: the rule,
   the practice area, the slash, the page. It was set not to wrap, so at 320px
   those four measured 319 in a box of 272 and the surplus went out of the page.
   Wrapping costs nothing at any width where they already fit. */
.label{flex-wrap:wrap}
/* Below about 380px the masthead heading is at its 40px floor while the column
   is 272px, and Greek has words that do not fit in that: Αυτοκατανάλωση
   measures 321. Thirty three headings, in both languages, were breaking in the
   middle of a word. Nothing wider than a phone this narrow is affected. */
@media(max-width:380px){.masthead h1{font-size:32px}}
  /* ---------- The newsletter card ----------
     Until 25 August 2026 these rules lived only in a per-page inline <style>
     block. 68 of the 267 pages carrying the markup never got the block, so the
     card rendered as unstyled browser controls with the .subhp honeypot label
     visible. A component used on 267 pages belongs in the stylesheet every one
     of them already loads. */
  .subcard{margin:34px 0 0;padding:26px 26px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper2,#F2F1EF)}
  .subcard .sh{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:21px;margin:0 0 8px}
  .subcard p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--mute);max-width:60ch}
  .subrow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
  .subrow input[type=email]{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--paper,#FAFAF9);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
  .subrow button{border:0;cursor:pointer;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r);background:var(--accent);color:#fff;font:500 12px/1 var(--sans);padding:14px 22px;min-height:44px;transition:background .22s}
  .subrow button:hover{background:#A05B38}
  .subhp{position:absolute;left:-9999px}
  .sublegal{font-size:12.5px;color:var(--mute);margin:12px 0 0}
  /* ---------- A heading with no class ----------
     Every heading on this site is styled by class, never by tag, so an <h2>
     that lost its class fell all the way to the browser's own bold sans. On 25
     August 2026 that was 51 headings across 41 pages, 32 of them the Greek FAQ
     heading, each rendering as Inter Bold 25.5px in the middle of a serif page.
     These are floors, not overrides: any classed rule outbids a bare tag, so
     .big, .mid and the scoped .h4 rules all still win. */
  h2{font-family:var(--serif);font-weight:400;color:var(--ink);
     font-size:clamp(24px,2.4vw,33px);line-height:1.2;letter-spacing:-.008em;margin:0 0 14px}
  h3{font-family:var(--serif);font-weight:400;color:var(--ink);
     font-size:clamp(18px,1.5vw,21px);line-height:1.3;margin:0 0 10px}
  .h4{font-family:var(--serif);font-weight:400;color:var(--ink);
      font-size:21px;line-height:1.3;margin:0 0 12px}
  /* ---------- "You are here" ----------
     This rule existed in the other two stylesheets and not in this one, so the
     124 article pages that shipped aria-current in their markup could never
     paint it. The cue was live on 99 of 442 pages and on none of the articles. */
  .nav ul a[aria-current="page"]{color:var(--accent-lt)}
  /* ---------- From the visual audit of 25 August 2026 ---------- */
  /* A deep link to a clause landed underneath the returning masthead. */
  [id]{scroll-margin-top:70px}
  /* The sticky section heading pinned at 36px, which the returning masthead
     now covers. */
  .two > div:first-child{top:70px}
  /* nav.rel is a flex row whose title is a bare text node - an anonymous flex
     item, which cannot be given min-width:0 - so a long title pushed the
     trailing arrow outside the link and the whole page sideways. Two pages did
     it: /title-deed-problems-cyprus at 406px in a 390px viewport, and
     /news-publications/el-tropopoiiseis-ergou at 420px. Letting the row wrap
     returns both to 390. */
  /* Tap targets. WCAG 2.5.8 asks for 24x24 and the platforms ask for 44. The
     wordmark measured 207x17 on 441 pages, the practice row 20px tall, and
     "More on this" 23px. The box grows around type that stays where it is. */
  .mark{min-height:44px}
  .sub-nav a{min-height:44px;display:inline-flex;align-items:center}
  .gmore{min-height:44px;display:inline-flex;align-items:center}
  /* ---------- The eyebrow, and its rule ----------
     Two faults in one component, both from the visual audit of 25 August 2026.
     1. .label is a flex row whose leading rule is a flex item and whose text is
        an anonymous one. With flex-wrap:wrap, a label long enough to need two
        lines pushed the text onto the second line and left the rule stranded
        alone on the first. It fired on every practice area page at 1440, and on
        the phone on labels as short as 44 characters. Laying the rule out
        inline instead lets the text wrap under itself and keeps the rule beside
        the first line, which is what it is for.
     2. .mmeta is the same component on the right of the masthead, and its rule
        was 24px against the label's 28px, so the pair that reads as one row
        across 174 of 176 pages was drawn with two different rules. */
  .label{display:block}
  .label i{display:inline-block;width:28px;height:1px;background:currentColor;
    vertical-align:middle;margin-right:12px;flex:none}
  .label a{vertical-align:middle}
  .mmeta i{width:28px}
  /* Sections carry padding on the bottom only, which works because the thing
     above is another section. After a .two grid there is nothing, so the next
     section's eyebrow landed 4px under the last line of the block above it. */
  /* The sections that need it carry style="padding-top:0" inline, which a
     class-less selector cannot outbid, so this one is marked, as the
     details seam rule above already is. */
  .two + section{padding-top:var(--s7)!important}
  /* The heading floor above sets color:var(--ink) so a classless heading on
     paper is not left at body colour. On the dark bands the ink is the ground,
     so those contexts take the colour they inherit instead. Caught 25 August
     2026: the closing "Tell us what happened, and when" on the practice pages
     measured 1.0:1 against the band it sits on. */
  .top h2,.top h3,.hero h2,.hero h3,.masthead h2,.masthead h3,
  .invite h2,.invite h3,.footwrap h2,.footwrap h3,
  .drawer h2,.drawer h3,.kpst h2,.kpst h3{color:inherit}
  /* The Greek masthead CTA reads "Υποβολή ερωτήματος", which is wider than
     "Request a consultation" once its tracking is applied, and the Greek-only
     shrink rules only start at 1280px. Between 1281 and about 1600 the button
     hung 63px past the 1266 line every other part of the masthead stops at.
     Letting the row give up its own gaps first keeps the button inside the
     gutter without another width guess. */
  html[lang=el] .nav{min-width:0}
  html[lang=el] .nav ul{min-width:0;flex-wrap:wrap;row-gap:6px}
  @media(min-width:1024px) and (max-width:1600px){
    html[lang=el] .nav ul{gap:14px}
    html[lang=el] .navcta{margin-left:10px;padding:12px 14px;letter-spacing:.07em}
  }
  /* Both Greek partner profiles exist and, until 25 August 2026, nothing on the
     Greek site reached them: every Greek page sent a Greek reader to the English
     bio. The partners' own names are the route now, in the same understated
     treatment the English home page uses. */
  .person h2 a,.lead h3.h4 a{color:inherit;text-decoration:none;
    background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
    background-position:0 100%;background-size:0 1px;
    transition:background-size .25s ease,color .2s ease}
  .person h2 a:hover,.lead h3.h4 a:hover{color:var(--accent);background-size:100% 1px}
  /* On the Greek partner pages main's last line and the dark band's top edge are
     the same pixel, so the band reads as a rectangle clipping the paragraph
     above it. The English pages have a trailing section that supplies the gap;
     the Greek ones do not, so main supplies it instead. */
  html[lang=el] main:has(.person){padding-bottom:var(--s8)}
@media print{.kpst,.k-p,.k-b,.actbar,.subcard,.nav ul,.navcta,.burger,.drawer,.flag,.skip,#plan,.cymap,.sub-nav,.jumps{display:none!important}.top,.top *,.hero,.hero *,.masthead,.masthead *,.footwrap,.footwrap *,footer,footer *,.invite,.invite *{color:#1A1817!important;background-color:transparent!important;border-color:rgba(26,24,23,.22)!important;text-shadow:none!important}.top .btn,.hero .btn,.invite .btn,footer .btn{border:1px solid rgba(26,24,23,.45)!important;background:none!important}.top,.hero,.masthead,.footwrap,footer,.invite,.sheet,.light{background:#fff!important;box-shadow:none!important}}
@media print{header .acts a.btn,header a.btn,.invite a.btn,.acts a.btn{color:#1A1817!important;background:none!important;background-color:transparent!important;border:1px solid rgba(26,24,23,.45)!important}.heroBody,.heroBody *{color:#1A1817!important}}

/* A page whose sheet opens straight onto the summary box gave it no room:
   the "In short" label sat 2px under the edge where the dark masthead
   becomes the white panel, against the 80px every other page uses. Four
   pages are built this way, with main outside the sheet rather than in
   it, so there is no <main style="padding-top"> to carry the gap. */
.sheet > .wrap:has(> .quick:first-child){padding-top:var(--s7)}
/* The gap goes on the wrap, not on the box. A margin-top on a first child
   collapses out through .wrap and .sheet, so it moved nothing; and padding
   on .quick itself would have stretched its accent rule upward. */

/* The closing gap before the dark consultation band.
   A page normally ends with a <section>, whose padding-bottom of 64 to 80px
   is what leaves light ground between the last line and the colour change:
   159 of the 171 pages that carry the band sit at 80 to 100px. Eight pages end
   on something else instead, a reading list, a send box, the newsletter card or
   a bare paragraph, none of which carry that padding, and their last line ran
   between 0 and 39px from the band. On /news the newsletter card's own grey
   edge was flush against it, which reads as the card being cut off.
   The gap goes on main rather than on the trailing block, because a margin on
   a last child collapses straight out through .wrap and .sheet.
   Scoped three ways so it only fires where the padding is genuinely absent:
   the sheet must be followed by the band, and main must not already end with a
   section or a nav, nor with an inner .sheet or .faq, which are the two shapes
   that carry their own closing space. */
.sheet:has(+ .invite) main:not(:has(> :is(section,nav,.sheet,.faq):last-child)){padding-bottom:var(--s7)}
/* The same page in its other arrangement, where main wraps the sheet rather
   than sitting inside it, so the band follows main and the gap belongs on the
   wrap. One page: /el-nomikoi-ypologistes, ending on a send box. */
main:has(+ .invite) > .sheet > .wrap:not(:has(> :is(section,nav):last-child)){padding-bottom:var(--s7)}

/* The reading cards carried their only "this is a link" cue in :hover, and a
   phone never delivers one, so on a touch screen a card reads as a serif line
   with a rule under it and nothing to say it goes anywhere. The sibling strips
   have always marked an onward link with an accent arrow at rest that slides
   3px on hover; the cards now carry the same one, same colour, same distance,
   so the two ways this site offers a next page finally look alike. The card
   gains a right gutter for it, because on a wide screen the category label
   sits in that corner and the arrow would otherwise land on top of it. */
.art{padding-right:26px}
.art::after{content:"\2192";position:absolute;right:0;top:20px;font-size:15px;line-height:1.55;color:var(--accent);transition:transform .2s ease}
.art:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.art::after{transition:none}}

/* When a form is submitted without JavaScript there is no script left running
   to report the outcome: the browser navigates away and the page is built
   again from scratch. The endpoints answer such a submission with a redirect
   back to the page, carrying #sent, #not-sent, #subscribed or #not-subscribed,
   and these two rules are what turn that fragment into something the visitor
   can read. Nothing here runs, which is the point: this is the path that has
   to work on the day the scripted one does not. */
.said{display:none}
.said:target{display:block}


/* The Greek header row carries eight items and 56 characters of label where the
   English one carries seven and 39. Measured in a browser on all 204 Greek
   pages, which are identical to the hundredth of a pixel. At 1024 the row wants
   525.84px and the nav has 479.91px to give it, 45.94px short, so ΑΝΑΖΗΤΗΣΗ and
   EN drop to a second line and the six items left above sit 22.3px above the
   centre of the consultation button. A 1px sweep puts this wrap at 1024 to 1075
   inclusive. The width comes back out of whitespace only, and out of two places
   at once because no single one is enough: letter-spacing:0 still leaves the row
   15.09px too wide, font-size:10px still leaves it 8.09px too wide, and taking
   it all from the item gaps means gap:7px, which halves them and still leaves
   only 3.06px in hand. Nine over twenty leaves 9.06px in hand at 1024, twice the
   4.44px the same row already runs on at 1080, and it changes no type size and
   no tracking, so the Greek nav still matches the English one. column-gap rather
   than the gap shorthand, so the rule touches only the axis that was measured
   and leaves row-gap where the 1024 to 1600 block put it. .nav .mark rather than
   .mark, because the sticky bar the script builds clones the wordmark into
   .kpst, outside .nav, and must keep its own 40px. The band ends at 1079 rather
   than 1075 because unpatched the row clears by only 0.84px at 1076 and 3.56px
   at 1079, too little to bet a font metric on.
   Specificity is (0,2,2), the same as html[lang=el] .nav ul{gap:14px} inside
   @media(min-width:1024px) and (max-width:1600px), and that shorthand also sets
   column-gap, so this block has to follow it in source order. End of file,
   verified by appending it to the served bytes of all three bundles. */
@media(min-width:1024px) and (max-width:1079px){
  html[lang=el] .nav ul{column-gap:9px}
  html[lang=el] .nav .mark{margin-right:20px}
}

/* The same row, the same 204 pages, the second band the block above does not
   reach. The Greek nav rules stop at 1600, so from 1601 up the item gaps go back
   to 20px and the consultation button back to its full 12px 20px padding and
   14px left margin, while the nav's own width is capped by --w at 1092px and
   never grows. The row is 63.56px short at 1601 and still 63.56px short at 1920
   and at 2560, so it wraps at every width above 1600, which is where most
   desktop readers are, and the shortfall there is larger than the 45.94px above.
   Restoring only what 1281 to 1600 already runs, the 14px gaps and the smaller
   button, brings it back to one row with 1.19px in hand, which is the hair the
   row is already living on at 1500 and too little to leave. One more pixel off
   the gaps, thirteen over fourteen, buys 8.19px, near the 9.06px above, and
   costs a 1px change in the gaps at the 1600 boundary that no one can see. The
   wordmark is left at 40px here because, unlike at 1024, there is enough without
   moving it. No upper bound, because there is no width at which this row comes
   back on its own. Both declarations land on elements that @media print sets to
   display:none, so paper is untouched at any width. */
@media(min-width:1601px){
  html[lang=el] .nav ul{column-gap:13px}
  html[lang=el] .navcta{margin-left:10px;padding:12px 14px;letter-spacing:.07em}
}

/* ---------- Tap targets, second pass: the footer lists ----------
   Measured on 14 pages across all six carriers at 300, 320, 340, 360, 375,
   390, 414, 430, 540, 560, 600, 768, 900, 1024, 1280, 1440 and 1920.
   The footer column lists are 6,583 links over the 449 pages, 9 to 19 a page,
   and every one came back 16px tall, or 17px in Services, against the 24px
   floor of WCAG 2.5.8: 13.5px type on a 23.6 to 24.3px line box gives an
   inline element a box only as tall as its type.
   Padding on an inline box grows the hit area and not the line box, so the
   type does not move. Footer top and footer height were identical to 0.01px
   before and after on all 238 page and width pairs measured, and the header
   crop at 320 and 390 is pixel identical on a bundle page and on all three
   inline ones.
   The min-height:44px used above for .mark and .sub-nav a is the wrong tool
   here: the Firm column alone lists 8 links, and min-height on this page's 23
   took the footer from 1396.3px to 1743.9px on an 844px screen.
   6px and not 7px because the tightest stack is the Services column, where
   .fgrid .fsvc li overrides the general margin-bottom:9px with 7px and
   .fgrid .fsvc a sets 14px type. That leaves 14.63px between one link box and
   the next on the index carrier and 15.30px on the bundles. 6px top and bottom
   leaves 2.63px of daylight; 7px would leave 0.63px, which is under one device
   pixel on a 1x screen and one edit away from an overlap. The links come out
   28 to 29px. The declaration to re-derive from is .fgrid .fsvc li
   margin-bottom, not the .fgrid li margin-bottom:9px that .fsvc overrides. */
footer .fgrid li > a{padding-top:6px;padding-bottom:6px}

/* The map link and the language switch are each alone in their own paragraph,
   so growing them upward cannot take a tap from a neighbour. With this rule
   applied the nearest link above .fmap is 132.8px away, across the address
   block, and the nearest above the language link is 9.5px away at 320 and 360.
   Top only, because both draw their underline with border-bottom over
   padding-bottom:1px and padding underneath would drop the rule 9px clear of
   the text. 18px becomes 26px and 17px becomes 25px.
   Not footer .fends a, which is the obvious rule and is wrong. That reaches
   the three legal links as well, and they are a middot separated run inside
   one paragraph: padding-top on the wrapped line lands on the line above.
   Measured, padding-top:8px there put Privacy Notice 2.5px over Fixed Fees on
   every English page from 300 to 353px wide, and the Greek privacy link 2.5px
   over the Greek fixed fees link on every Greek page from 300 to 385px, which
   takes in 320, 360 and 375. No value fixes it either: that paragraph's line
   height is 22.5px and its inline boxes are 17px, so consecutive lines sit
   5.5px apart and any symmetric target over 22.5px overlaps the line above.
   Those three, and the link inside p.note on 110 pages, stay at 17px under the
   Inline exception to 2.5.8, an inline link whose size is constrained by the
   line height of the non-target text around it. A sweep that reports raw
   sub-24 counts will flag four links a page here, so the reason has to travel
   with the number. */
footer .fmapline .fmap,
footer .fends .flang a{padding-top:8px}

/* The menu button is the whole of the navigation below 1024px. It is drawn
   46x40 by the three bundles and by news.html and team.html, and 42x42 by
   index.html; both clear 24px and both miss the 44px platform floor. Below
   340px the header flex row squeezes it as well, to 33.75px wide at 330 and
   23.75px at 320, 20.19px on news.html, so it fails 24px on the other axis
   too. A real click 21px above the centre left aria-expanded at false on five
   of the six carriers and never opened the drawer; with this rule the same
   click opens it on all six.
   A centred pseudo-element rather than min-height for three reasons. It leaves
   both buttons drawn exactly as they are, header crop pixel identical at 320
   and 390, where min-height would redraw a bordered control that is 1px away
   from the wordmark's colour. It lands on 44x44 from either authored size
   instead of producing 46x44 on five carriers and 44x44 on the sixth. And it
   repairs the squeezed width, which min-height would not.
   .burger computes position:relative in all six, verified on rendered pages,
   so the pad anchors to the button. That keyword is load bearing and a rewrite
   of this declaration must keep it. :nth-child does not count pseudo-elements,
   so the two span bars still match their rules and still measure 16 and 23px
   from the button's top, 25 on index.
   @media print already sets .burger to display:none, so nothing is generated
   there; computed display is none under print emulation. The rule is invisible
   only because the pseudo has no background, border or content of its own, so
   anyone giving .burger decoration has to check it.
   It does not reach the sticky masthead's copy of the button: the script
   builds that one with class kpst-burger, styles it 46x44 through
   .kpst .kpst-burger, and leaves it position:static inside a .kpst that is
   position:fixed. Adding .kpst-burger here would anchor a 44x44 hit box to the
   fixed bar instead of to the button, over the wordmark copy. That button is
   46x44 at 390 and squeezes to 43.75px at 360 and 20.19px at 320; it is a
   separate defect and needs its own position:relative first.
   One number to know: below 320px the squeeze is deep enough that the 44px box
   reaches past the viewport and document scroll width goes from 300 to 301 at
   a 300px viewport. At 320px, the reflow floor of WCAG 1.4.10, there is
   13.87px of headroom, and /news already scrolls to 315px at 300px wide
   without this rule. */
.burger::before{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

  /* .aside is the fifth carrier of this defect and the largest. The earlier
     note called .aside{top:26px} dead CSS on the strength of
     grep -l 'class="aside"' *.html, which searches the repository root only.
     The articles are not in the root. class="aside" appears 268 times, on the
     266 pages under news-publications/ that link this bundle, plus two
     templates under tools/ that are not served. Measured on English and Greek
     articles at 1920, 1440, 1280 and 1024 with the masthead settled: .aside
     pins at 26px and its top 29px are behind the 55px masthead, which is the
     whole of the 2px reading progress bar at y=26 to 28 and 1px off the top of
     the "On this page" heading. The progress bar is hidden exactly when it is
     meant to be read, which is while the masthead is showing.
     70px matches the [id]{scroll-margin-top:70px} three lines above. top stays
     inert at 1000px and below, where the max-width:1000px rule sets
     position:static, and the geometry diff of a whole article page at four
     scroll depths moves the 38 elements of the aside subtree and nothing else:
     no width, no height, no document height, no new overflow. */
  .aside{top:70px}