/* 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;
    --valid:#1C6B3F; --invalid:#A3261A; --field:rgba(26,24,23,.28);
    --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;
    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.75;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
  a{color:inherit} p{margin:0 0 20px;max-width:62ch}
  ::selection{background:var(--accent-lt);color:var(--ink)}
  #plan{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
  textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  .label{font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.22em;
    color:var(--accent);margin:0 0 20px;display:flex;gap:14px;align-items:center}
  .label i{width:28px;height:1px;background:currentColor;flex:none}
  .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 20% 36%,rgba(13,12,11,.88),rgba(13,12,11,.40) 62%,transparent)}
  .top .label{color:var(--accent-lt)}
  .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)}
  /* ---------- 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)}
  .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 24px;max-width:15ch}
  .masthead p{color:var(--onDarkMute);max-width:54ch;font-size:clamp(16px,1.3vw,18.5px);margin:0}
  .sheet{position:relative;z-index:1;background:var(--paper)}
  .cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(32px,6vw,86px);padding:var(--s6) 0 var(--s7)}
  @media(max-width:1023px){.cols{grid-template-columns:minmax(0,1fr)}}
  h2.big{font-family:var(--serif);font-weight:400;color:var(--ink);
    font-size:clamp(30px,3.4vw,45px);line-height:1.12;letter-spacing:-.010em;margin:0 0 18px;max-width:28ch}
  form{margin-top:30px}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media(max-width:640px){.row{grid-template-columns:1fr}}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:10.5px;font-weight:500;text-transform:uppercase;
    letter-spacing:.16em;color:var(--ink);margin-bottom:8px}
  .field label .req{color:var(--accent)}
  .field input,.field select,.field textarea{width:100%;font-family:var(--sans);
    font-size:16.5px;padding:13px 15px;border:1px solid var(--field);border-radius:var(--r);
    background:#fff;color:var(--ink);line-height:1.5}
  .field textarea{min-height:150px;resize:vertical}
  .field .help{font-size:13.5px;color:var(--mute);margin:8px 0 0}
  .field .msg{font-size:13.5px;margin:8px 0 0;display:none}
  .field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{
    border-color:var(--invalid);border-width:2px}
  .field.is-invalid .msg{display:block;color:var(--invalid)}
  .btn{display:inline-block;text-decoration:none;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)}
  .btn:hover{background:#A05B38}
  .legal{margin-top:22px;font-size:13.5px;color:var(--mute);max-width:56ch}
  .side{border-left:1px solid var(--line);padding-left:clamp(24px,3.5vw,48px);align-self:start;position:sticky;top:26px}
  @media(max-width:1023px){.side{border-left:0;padding-left:0;border-top:1px solid var(--line);
    padding-top:38px}}
  .side h3{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
    color:var(--mute);margin:0 0 14px}
  .side .block{margin-bottom:34px}
  .side p{margin:0 0 6px;font-size:16px}
  .side a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  .side a:visited{color:#A9643F}
  .side a:hover{color:#6E4630;text-decoration-thickness:2px}
  .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)}
  .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}
  .skip:focus{left:12px;top:12px}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* sticky masthead, larger navigation type */
.top{background:var(--ink)}
.nav ul a{font-size:12px}
.nav ul{gap:20px}
.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}}
.leads{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin:8px 0 26px}
.leads.stack{grid-template-columns:1fr;gap:22px;margin-top:4px}
.lead{display:flex;gap:20px;align-items:flex-start}
.lead img{width:84px;height:112px;object-fit:cover;object-position:50% 20%;border-radius:var(--r);flex:none;background:var(--paper2)}
.lead h3.h4,.lead h2.h4,.lead h3.mid{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;color:var(--ink);margin:0 0 2px;text-transform:none;letter-spacing:-.004em}
.role{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:0 0 10px}
.lead p{margin:0;font-size:15.5px;max-width:40ch}
@media(max-width:520px){.leads{grid-template-columns:1fr}.lead{display:block}.lead img{width:100px;height:134px;margin:0 0 14px}.lead p{max-width:none}}
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
@media (forced-colors: active){
    .btn,.navcta{border:1px solid ButtonText}
    .burger span{background:ButtonText}
  }
.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}
  /* 12.5px on the other two bundles. The override used to sit above this
     base rule, so the base won and the masthead moved 4px when a visitor
     stepped between /about and /team. */
  .navcta{font-size:12.5px}.navcta:hover{border-color:var(--accent-lt);color:var(--accent-lt)}.nav ul a:hover{color:var(--onDark)}.nav ul a[aria-current="page"]{color:var(--accent-lt)}/* The consultation block paints its own dark ground, so its text has to be the
   dark band colours. This sheet had .invite .label but not the three rules
   around it, so on /about and /law-firm-in-nicosia-cyprus the heading and the
   body were rendering in the paper colours on that dark ground: 1.96:1, where
   AA wants 4.5. The other two sheets have carried these all along. */
.invite{position:relative;z-index:1;color:var(--onDark)}
.invite p{color:var(--onDarkMute);max-width:54ch}
.invite a:focus-visible{outline-color:var(--accent-lt)}
.invite .label{color:var(--accent-lt)}.reg{margin-top:14px;font-size:12.5px;color:var(--mute)}.masthead .stand{font-family:var(--serif);font-style:normal;color:rgba(242,243,244,.78);font-size:clamp(18px,2vw,25px);line-height:1.45;max-width:46ch;margin:0;border-left:2px solid var(--accent);padding-left:24px}
.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}
.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:64px 0 16px}.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}
.wrap.masthead{position:relative}
.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,.55);display:flex;align-items:center;gap:12px;margin:0}
.mmeta i{width:24px;height:1px;background:var(--accent);display:inline-block}
@media(max-width:1000px){.mmeta{display:none}}
@media(max-width:760px){.masthead .stand{padding-left:18px}}
@media(min-width:761px){.masthead .label a{white-space:nowrap}}
/* ---------- 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 summary::after{transition:transform .3s ease}
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)}
/* Quick contact bar. Added 20 August 2026: 159 pages carried this and about,
   careers and the Nicosia landing page did not, for no reason anyone recorded.
   The exclusions that are deliberate stay excluded: the contact pages are the
   bar, and privacy, terms and 404 are not selling anything. */
.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))}
}
/* ---- polish v6: the expensive pass, 21 August 2026. The same materials as
   the main sheet: the copper seam, the maker's stamp in the footer, page
   continuity, the composed masthead, and finish for the form fittings. ---- */
html{text-rendering:optimizeLegibility;font-kerning:normal}
:target{scroll-margin-top:96px}
@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}}
@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)}}
.sheet{box-shadow:0 -1px 0 rgba(212,150,125,.22)}
.footwrap{border-top:1px solid rgba(242,243,244,.07)}
.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)}
.lead img{box-shadow:0 0 0 1px var(--hair),0 16px 30px -22px rgba(26,24,23,.55)}
table{border-collapse:collapse}
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}
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}
/* The form fittings: a select that looks tailored, placeholders a shade
   quieter, borders that answer the hover before the focus arrives. */
.field ::placeholder{color:#9A948D;opacity:1}
.field input:hover:not(:focus),.field select:hover:not(:focus),
.field textarea:hover:not(:focus){border-color:rgba(26,24,23,.45)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E6862' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink)}
/* The printed page: chrome off, ink on white, the letterhead voice. */
@media print{
  body{background:#fff!important;color:#1A1817;animation:none}
  #plan,.nav ul,.navcta,.burger,.drawer,.actbar,.flag,.skip,.invite{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}
  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}}
/* The two column block, ported from the other two sheets.
   This sheet had no .two rule at all, so on /about and
   /law-firm-in-nicosia-cyprus the grid was never a grid: display computed to
   block and the two columns stacked, on every width. Both pages are written
   with .two throughout, so the layout they were designed for had never been
   rendered on them.
   Copied verbatim rather than rewritten, so the eight pages that load this
   sheet match the other 427. */
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(26px,6vw,88px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
@media(min-width:901px){
  .two > div:first-child{position:sticky;top:36px;align-self:start}
}
/* Ported verbatim from the largest sheet.
   These eight pages load a sheet of their own, because they carry the contact
   form and the legal pages and 37 selectors the others do not need. That is a
   reasonable split. What was not reasonable is that it had also fallen behind
   on rules it does need, and the gaps were invisible until measured: the role
   line under a partner's name rendering at 15.5px instead of 10.5, the small
   heading inside a "send" block at 17px instead of 11 and with no accent rule
   beside it, the consultation heading at 25.5px instead of 39.68.
   Checked by comparing computed styles on these pages against the same
   component on a page that loads the full sheet, rather than by reading the
   two files side by side. */
.lead h4,.lead h3.h4,.lead h2.h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 2px}
.lead .role{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
    color:var(--mute);margin:0 0 10px}
.send{border-left:2px solid var(--accent);padding:4px 0 4px clamp(18px,2.6vw,30px);
    margin-top:34px;background:none}
.send .h{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
    color:var(--accent);margin:0 0 10px}
.send p:last-child{margin-bottom:0}
.invite h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.1vw,41px);
    line-height:1.08;letter-spacing:-.02em;margin:0 0 24px;max-width:15ch;
    /* 15ch is a measure, not a wall. Greek builds long compounds, and
       "εμπιστευματοπάροχος" needs 281px where 15ch gives 245, so on a phone the
       word ran straight out of the heading and into the space beside it. There
       was room: the column is 342px. min-content keeps the measure for line
       breaking and stops the box being narrower than its own longest word.
       break-word is the backstop for a word longer than the column itself,
       which no heading has today. */
    min-width:min-content;overflow-wrap:break-word}
.route{border-top:1px solid var(--line);margin-top:8px}
/* 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}}
  /* ---------- 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}
  /* ---------- 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%)}

/* The intake launcher is fixed at the foot of the window and it is opaque, so at rest it
   sits on whatever line of the measure happens to be there. Measured 28 August 2026 in
   Chromium, at rest, caretRangeFromPoint on a lattice inside the button rect every 60px of
   scroll, nine pages in both languages at 900, 1024, 1280 and 1440, glyphs clipped by a
   scroller discounted: 794 of 2279 resting positions carried live body text under the
   button, 5103 characters. The same sweep with this rule in place gives 0 of 2279 and 0
   characters. Turn scroll-behavior off before sampling, or the smooth scroll on html makes
   every reading a reading of the same position.
   The audit filed this as a zoom defect. It is not one. Zoom only narrows the CSS viewport,
   and the viewport is the whole story. The wrapper leaves a right gutter of exactly
   var(--gut) on all 141 pages that render the launcher, 45px at 900 and 51.2px at 1024,
   while the launcher is 204.20 to 218.61px wide in English and 261.88 to 274.69px in Greek.
   So it laps 175 to 233px into the column at 900, is still 141 to 197px into it at 1280,
   and only comes clear at 1562 in English and 1674 in Greek. 1673 is measured, not guessed:
   at 1673 the Greek pill still laps 0.19px into the measure, at 1674 it clears by 0.31px.
   The tab stands on its side in that gutter instead of lying across the text. Both the inset
   and the width are written off var(--gut), the token the wrapper pads with, so the
   clearance is gut minus 16 minus (gut minus 26) and stays 10px whatever --gut evaluates to.
   Measured on all 141 pages at 900, 1024, 1200, 1280, 1440 and 1673, against every visible
   text rect and control box on each page with ancestor clipping applied: minimum equals
   maximum equals 10px at 900, opening to 27 and more above 1220. That makes it a property of
   the wrapper and not of any page. A flat 32px would have been true today and wrong the day
   --gut moved.
   The inset stays at 16px rather than filling the gutter to 4px off the edge. 16px is not a
   new number: intake.js pins the button and the panel together at right:16px and the panel
   is still there, so 4px would leave the two halves of one component at different distances
   from the edge. At 4px the outer edge of the focus ring, outline 2px at offset 2px, lands
   on exactly innerWidth at 900, 1024, 1280, 1440 and 1673, with nothing at all to spare, and
   the tab stands in the lane an overlay scrollbar paints in. Holding 16px costs 12px of tab
   width, 19 to 38px instead of 31 to 50px, and costs the reader nothing: the left edge of
   the tab, which is the edge the measure meets, is unmoved at 865, 982.81, 1226 and 1386.
   The label is not clipped at 19px in either language; scrollWidth equals clientWidth at
   every width in the band.
   Nothing is hidden and nothing is reduced to an unlabelled dot: the words stay, it stays
   focusable, and it still opens. The away transform is turned sideways because the tab is
   210 to 275px tall and the inherited translateY would sweep that much down the screen on
   every scroll. 100% plus 20px is what clears a 16px inset, measured fully off the viewport
   at 900, 1024, 1280 and 1440, and neither state adds a pixel to scrollWidth.
   The selector is doubled on purpose. intake.js appends its own <style> to <head> after this
   file, so a plain .k-b ties on specificity and loses on order. It would not even fail
   cleanly: measured with one class at 1024, writing-mode and width land, right and padding
   do not, and what is left is a squeezed tab whose left edge sits at 970.81 against a
   measure that ends at 972.80, which is 2px over the text.
   One thing left alone on purpose. p.mmeta in the masthead overhangs the wrapper edge and
   reaches 0.24px into the tab at 1024 and 2.0px at 1200, on all 141 pages. It is display:none
   below 1001px and it sits at the top of the document, and on all 141 pages at all six widths
   no scroll position brings it into the band the tab occupies. Any future element that
   overhangs the gutter that way and sits low on the page would eat the 10px.
   1673 is the one bound here tied to rendered text width rather than to a token. If the Greek
   label is reworded longer, or the sans face changes metrics, measure it again. */
@media (min-width:900px) and (max-width:1673px){
  .k-b.k-b{
    writing-mode:vertical-rl;
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(var(--gut) - 26px);
    right:16px;
    padding:18px 0;
  }
  .k-b.k-b[data-away="1"]{transform:translateX(calc(100% + 20px))}
}

  /* The same returning masthead covers .side, which that pass moved for .two
     and not here. Measured at 1440, 1280, 1100 and 1024 on the eight pages that
     carry .side: pinned at 26px, the first heading line sits at y=26 and is
     13px tall, so all 13px are behind the 55px masthead.
     Seven pages, not eight. On /contact the sidebar is 2294px tall and fills
     its own grid area, so it has no room to travel and never pins at any width:
     the rule is inert there, not merely subtle.
     70px is the offset this file already uses for .two. What it costs, which
     the earlier note did not record: the sidebar's tail sits 44px lower for the
     length of the pinned window, so on /law-firm-in-nicosia-cyprus at 1440x900
     the closing "Fees" block loses 30px below the fold that it kept before, and
     /careers at 1366x657, /terms-conditions at 1280x633 and /about at 1440x1100
     each lose 27 to 37px the same way. Nothing becomes unreachable: measured
     across the whole document, the last block of every sidebar is still fully
     on screen once the pinned window ends.
     top stays inert at 1023px and below. The max-width:1023px rule strips the
     border but leaves position:sticky standing, so the reason is not that the
     element stops being sticky: it is that the stacked .side becomes its own
     grid row with no room below it. Traced in 15px steps from 1023 down to 320
     on /about, /careers and /contact, the pinned position is identical at 26px
     and at 70px. */
  .side{top:70px}