/* Approved mockup (demos-concept/concept.py, AVOCAT, phone 390 px), as drawn; --pad and the media queries widen it.
   No ratings, reviews or testimonials on this page (bar rules): the mockup has none. */
:root{--navy:#13213a;--navy2:#1d2e4d;--brass:#b38b4d;--brass2:#d6b67e;--stone:#e3e6e9;--white:#fbfbfa;--ink:#1a2230;--mute:#5e6878;--pad:18px}
body{background:var(--white);color:var(--ink);font-family:"Newsreader 16pt",Georgia,serif}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.head :focus-visible,.abroad :focus-visible,footer :focus-visible{outline-color:var(--brass2)}

/* Concept bar: a strip at the top at every width, as on the other concept sites. */
.concept,[dir] .concept{position:static;translate:none;justify-content:center;block-size:auto;max-inline-size:none;padding:7px 20px;border-radius:0;background:var(--white);backdrop-filter:none;box-shadow:none;color:var(--navy);font:600 11px/1.4 "Newsreader 16pt",Georgia,serif;letter-spacing:.12em;text-transform:uppercase;white-space:normal;text-align:center}
.concept:hover,.concept:focus-visible{color:var(--navy);text-decoration:underline}
.concept:focus-visible{outline-color:var(--navy);outline-offset:-4px}

.head{background:var(--navy);color:var(--white);padding:22px var(--pad) 30px}
.who{font:500 21px/1.2 "Newsreader 16pt",Georgia,serif} .who span{display:block;font:italic 400 14.5px/1.4 "Newsreader 16pt",Georgia,serif;color:#aeb8c9;margin-top:3px}
h1{font:400 44px/1.02 "Newsreader 16pt",Georgia,serif;letter-spacing:-.02em;margin:30px 0 16px}
.sit{border-top:1px solid rgba(214,182,126,.45)}
.sit a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(214,182,126,.45);font:400 20px/1.2 "Newsreader 16pt",Georgia,serif;color:var(--white)}
.sit a:after{content:"";width:9px;height:9px;border-top:1.5px solid var(--brass2);border-right:1.5px solid var(--brass2);transform:rotate(45deg);flex:none}
.sit a:hover{color:var(--brass2)}
.else{font:italic 400 15px/1.5 "Newsreader 16pt",Georgia,serif;color:#aeb8c9;margin:16px 0 18px}
.btn{display:block;text-align:center;padding:15px 8px;font:600 15px/1 "Newsreader 16pt",Georgia,serif;background:var(--brass);color:var(--navy)}
.btn.line{background:transparent;border:1px solid var(--brass2);color:var(--brass2);margin-top:10px}
.me{position:relative;height:460px}
.me .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.me div.t{position:absolute;left:0;right:0;bottom:0;padding:60px var(--pad) 20px;background:linear-gradient(180deg,transparent,rgba(19,33,58,.92));color:#fff}
.me b{display:block;font:500 22px/1.2 "Newsreader 16pt",Georgia,serif;margin-bottom:6px} .me p{margin:0;font:400 15px/1.55 "Newsreader 16pt",Georgia,serif;color:#d6dce8}
section{padding:34px var(--pad) 0}
h2{font:400 32px/1.05 "Newsreader 16pt",Georgia,serif;letter-spacing:-.015em;margin:0 0 6px}
.sub{font:italic 400 15px/1.55 "Newsreader 16pt",Georgia,serif;color:var(--mute);margin:0 0 18px}
.st{display:flex;gap:16px;padding:14px 0;border-top:1px solid #e3e5e8}
.st i{font:300 44px/.85 "Newsreader 16pt",Georgia,serif;font-style:normal;color:var(--brass);width:26px;flex:none}
.st b{display:block;font:600 17px/1.25 "Newsreader 16pt",Georgia,serif} .st span{display:block;font:400 15px/1.6 "Newsreader 16pt",Georgia,serif;color:var(--mute);margin-top:3px}
.areas{font:400 16.5px/1.7 "Newsreader 16pt",Georgia,serif;margin:0}
.desk{margin-top:34px;height:230px;position:relative}
.desk .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.desk:after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,rgba(19,33,58,.85))}
.desk p{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;margin:0;z-index:1;font:italic 400 20px/1.3 "Newsreader 16pt",Georgia,serif;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.abroad{background:var(--navy2);color:var(--white);padding:26px var(--pad)}
.abroad h2{color:var(--white)} .abroad p{font:400 15.5px/1.6 "Newsreader 16pt",Georgia,serif;color:#c6cedb;margin:0 0 16px}
.addr{font:400 16px/1.55 "Newsreader 16pt",Georgia,serif;margin:0 0 10px}
table{width:100%;border-collapse:collapse;font:400 15px "Newsreader 16pt",Georgia,serif} td{padding:9px 0;border-top:1px solid #e3e5e8} td+td{text-align:right;font-weight:600}
footer{margin-top:34px;background:var(--navy);color:var(--white);padding:24px var(--pad) 26px}
footer b{display:block;font:500 20px "Newsreader 16pt",Georgia,serif} footer span{display:block;margin-top:6px;font:italic 400 14px "Newsreader 16pt",Georgia,serif;color:#aeb8c9}
.cf{margin:16px 0 0;font:400 11.5px/1.5 "Newsreader 16pt",Georgia,serif;color:#8a95ab}

/* Tablets: the same page, the text held to a readable column. */
@media (min-width:600px){
:root{--pad:max(32px,(100% - 640px)/2)}
h1{font-size:52px}
.me{height:560px}
.desk{height:300px}
}

/* From 900 px: the question beside its list of situations; the portrait beside its text. */
@media (min-width:900px){
:root{--pad:max(40px,(100% - 1100px)/2)}
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"who who" "h1 sit" "else sit" "btns sit";grid-template-rows:auto auto auto 1fr;column-gap:72px;padding-block:32px 64px}
.who{grid-area:who;font-size:24px} .who span{font-size:16px}
h1{grid-area:h1;font-size:clamp(56px,5.4vw,72px);margin:64px 0 0}
.sit{grid-area:sit;margin-top:64px}
.sit a{padding:20px 4px;font-size:25px}
.sit a:after{width:11px;height:11px;margin-right:6px}
.else{grid-area:else;font-size:17px;margin:24px 0 32px;max-width:440px}
.btns{grid-area:btns;max-width:440px}
.btn{padding:18px 8px;font-size:16px}
.me{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--navy)}
.me .ph{position:relative;inset:auto;height:620px}
.me div.t{position:relative;align-self:center;padding:48px 64px;background:none;max-width:560px}
.me b{font-size:34px;margin-bottom:16px} .me p{font-size:18px}
section{padding-top:64px}
h2{font-size:44px;margin-bottom:10px}
.sub{font-size:17px;margin-bottom:24px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.st{padding-block:20px}
.st b{font-size:19px} .st span{font-size:16px}
.areas{font-size:19px;max-width:820px}
.desk{margin-top:64px;height:440px}
.desk p{bottom:32px;font-size:30px;max-width:900px}
.abroad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start;padding-block:64px}
.abroad h2{grid-row:1 / span 2}
.abroad p{font-size:18px;margin-bottom:24px}
.abroad .btn{max-width:320px}
.place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;align-items:start}
.place h2,.addr{grid-column:1}
.place table{grid-column:2;grid-row:1 / span 2;font-size:16px}
.addr{font-size:18px}
footer{margin-top:64px;padding-block:36px 40px}
footer b{font-size:26px} footer span{font-size:16px}
}