/* ============================================================================
   R.P.A. PORT LTD — site stylesheet
   Design direction: Gemini, 6 Sep 2026, corrected by Doron.
     · blue and white; deeper blue than Militzer & Münch; Kuehne+Nagel scale
     · ZERO gold in the interface — gold lives only inside the logo itself
     · the logo is never recoloured, and sits on white
     · nothing fixed-height: Hebrew is RTL and Russian runs ~20% longer, so
       every block grows with its text instead of clipping it
     · the photographs are evidence, so they carry a place-and-year tag
   Fonts are self-hosted: no third-party request, nothing outside can break it.
   ============================================================================ */
@import url("/assets/fonts/fonts.css");

:root{
  /* surfaces */
  --white:#fff;
  --surface:#f4f7fa;          /* alternate rows, data blocks */
  --line:#e2e8f0;             /* hairline rules */
  /* the blues */
  --navy:#0a1d37;             /* headings, nav, dark bands */
  --blue:#154360;             /* links, buttons, active state */
  --blue-lift:#1d5c85;        /* hover */
  --ink:#2d3748;              /* body text — never pure black over 28,000 words */
  --muted:#5a6b7c;
  /* gold appears ONCE: inside the logo. Never as an interface colour. */
  --max:1280px;
  --head:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:17px/1.72 "Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.rtl{
  direction:rtl;
  font-family:"Assistant","Inter","Segoe UI",system-ui,Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-lift);text-decoration:underline}

h1,h2,h3,h4{
  font-family:"Playfair Display","Georgia",serif;
  color:var(--navy);line-height:1.16;margin:0 0 .55em;font-weight:700;
  letter-spacing:-.01em;
}
body.rtl h1,body.rtl h2,body.rtl h3,body.rtl h4{
  font-family:"Assistant",system-ui,Arial,sans-serif;font-weight:800;letter-spacing:0;
}
h1{font-size:clamp(29px,3.6vw,46px)}
h2{font-size:clamp(24px,2.9vw,36px)}
h3{font-size:20px}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-inline-start:20px}
li{margin:.3em 0}
strong,b{color:var(--navy)}
hr.rule{border:0;border-top:1px solid var(--line);margin:36px 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.gap{width:100%}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(10,29,55,.04);
}
/* a thin navy rule above the header gives the white strip an edge and stops it
   floating; Kuehne+Nagel and M&M both anchor the top of the page this way */
.site-head::before{content:"";display:block;height:4px;background:var(--navy)}
.head-in{display:flex;align-items:center;gap:26px;min-height:var(--head)}
.brand{display:flex;align-items:center;gap:16px;flex:0 0 auto;
  padding-inline-end:26px;margin-inline-end:6px;border-inline-end:1px solid var(--line)}
.brand:hover{text-decoration:none}
/* The logo is intricate — a globe with a cage, continents and a folded ribbon.
   Below about 70px it collapses into a dark blob, so it is given real size and
   the wordmark is set to match its weight rather than sit beside it apologetically. */
.brand-mark{height:78px;width:auto;flex:0 0 auto}
.brand-words{display:flex;flex-direction:column;line-height:1;gap:5px}
.brand-name{font-family:"Playfair Display",Georgia,serif;font-size:27px;font-weight:800;
  color:var(--navy);letter-spacing:.02em;white-space:nowrap}
.brand-sub{font-size:10.5px;font-weight:700;letter-spacing:.34em;color:var(--blue);
  text-transform:uppercase}

.mainnav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.mainnav>ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.mainnav a{
  display:block;padding:12px 16px;color:var(--navy);font-size:13.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.mainnav>ul>li>a:hover{border-bottom-color:var(--blue)}
.mainnav a:hover{color:var(--blue);text-decoration:none}
.mainnav li{position:relative}
.mainnav li ul{
  position:absolute;inset-inline-start:0;top:100%;min-width:264px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,29,55,.14);
  list-style:none;margin:0;padding:8px;display:none;z-index:70;
}
.mainnav li.has-sub:hover>ul,.mainnav li.has-sub.open>ul{display:block}
.mainnav li ul a{text-transform:none;letter-spacing:0;font-weight:500;font-size:14.5px;
  white-space:normal;padding:9px 12px;color:var(--ink)}
.mainnav li ul a:hover{background:var(--surface);color:var(--blue)}

.langs{display:flex;gap:4px;flex:0 0 auto}
.langs a{padding:6px 9px;font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.06em}
.langs a:hover{color:var(--blue);text-decoration:none}
.langs a.on{color:var(--navy);border-bottom:2px solid var(--blue)}
.burger{display:none;background:none;border:0;color:var(--navy);font-size:24px;
  cursor:pointer;padding:4px 8px;margin-inline-start:auto}

/* ------------------------------------------------------- hero (home only) */
.hero{position:relative;overflow:hidden;min-height:clamp(380px,50vw,600px);
  display:flex;align-items:center;background:var(--navy)}
.hero-bg{position:absolute;inset:0;display:flex;
  transition:transform 1.2s cubic-bezier(.55,.05,.25,1);will-change:transform}
.hero-slide{flex:0 0 auto;min-width:0;height:100%;
  background-size:cover;background-position:center 45%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,29,55,.80) 0%,rgba(10,29,55,.45) 55%,rgba(10,29,55,.22) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--max);
  margin:0 auto;padding:52px 28px}
.hero-inner h1,.hero-inner h2,.hero-inner h3,.hero-inner p,.hero-inner span,
.hero-inner strong{color:#fff}
.hero-inner h1{font-size:clamp(30px,4.6vw,60px);text-transform:uppercase;
  letter-spacing:.005em;max-width:17ch;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero-inner p{font-size:clamp(16px,1.6vw,20px);max-width:56ch;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-inner .sec{padding:0;background:none!important;min-height:0!important}
.hero-dots{position:absolute;z-index:3;bottom:18px;inset-inline:0;display:flex;
  gap:8px;justify-content:center}
.hero-dot{width:30px;height:3px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(255,255,255,.4)}
.hero-dot.on{background:#fff}
.hero-count{position:absolute;z-index:3;inset-inline-end:14px;bottom:12px;
  background:rgba(10,29,55,.6);color:#dbe7f1;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:2px}
.hero-plain{min-height:0;height:auto;aspect-ratio:3/2;max-height:420px;background:var(--navy)}
.hero-plain::after{background:none}
.hero-plain .hero-slide{background-size:cover}
@media (prefers-reduced-motion:reduce){.hero-bg{transition:none}}

/* ------------------------------------------------------ the trust ribbon */
.trust{background:var(--navy);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;padding-block:26px}
.tr{padding:6px 18px;border-inline-start:1px solid rgba(255,255,255,.16)}
.tr:first-child{border:0}
.tr b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(23px,2.4vw,32px);
  color:#fff;line-height:1;margin-bottom:6px}
.tr span{font-size:12px;color:#a9c2d6;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
body.rtl .tr b{font-family:"Assistant",sans-serif}

/* ------------------------------------------------------------ page header */
.page-title{background:var(--navy);color:#fff;padding:clamp(34px,4.6vw,58px) 0;
  background-size:cover;background-position:center 42%}
.page-title h1{color:#fff;margin:0;max-width:24ch}
.crumbs{font-size:12.5px;color:#9fb7c9;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:12px}
.crumbs a{color:#9fb7c9}
.crumbs a:hover{color:#fff}

/* --------------------------------------------------- inner page: 30 / 70 */
.page-body{display:grid;grid-template-columns:290px minmax(0,1fr);gap:52px;
  padding:clamp(34px,4.4vw,62px) 0}
.side{position:sticky;top:calc(var(--head) + 18px);align-self:start;font-size:14.5px}
.side h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  font-family:"Inter",sans-serif;font-weight:700;margin:0 0 10px}
.side h4+ul{margin:0 0 26px;padding:0;list-style:none}
.side li{margin:0;border-bottom:1px solid var(--line)}
.side li a{display:block;padding:9px 0;color:var(--ink);font-size:14.5px}
.side li a:hover,.side li a.on{color:var(--blue);text-decoration:none}
.side li a.on{font-weight:700}
.side .dl{display:block;padding:8px 0;color:var(--blue);font-size:13.5px;font-weight:600}
.side .gw{color:var(--ink);padding:5px 0;font-size:14px}
.content>*:first-child{margin-top:0}
@media (max-width:900px){
  .page-body{grid-template-columns:1fr;gap:30px}
  .side{position:static;border-top:1px solid var(--line);padding-top:24px}
}

/* --------------------------------------------------------------- blocks */
main{padding-bottom:0}
.sec{padding:clamp(34px,4.4vw,58px) 0}
.sec-bg{background-size:cover;background-position:center;color:#eaf1f7}
.sec-bg h1,.sec-bg h2,.sec-bg h3{color:#fff}
.on-dark,.on-dark p,.on-dark li,.on-dark span,.on-dark td{color:#d3e0ea!important}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark b,.on-dark strong{color:#fff!important}
.on-dark a:not(.btn){color:#8fc0e0!important}
.banner{background-size:cover;background-position:center;color:#fff;padding:64px 0}
.banner h1,.banner h2,.banner h3{color:#fff}

.row{display:flex;flex-wrap:wrap;gap:30px;margin:0 auto;padding:6px 0;
  max-width:var(--max);align-items:flex-start}
.sec .row,.banner .row{padding:0}
.col{flex:1 1 280px;min-width:0}
.c12{flex-basis:100%}
.c6{flex-basis:calc(50% - 15px)}
.c4{flex-basis:calc(33.333% - 20px)}
.c3{flex-basis:calc(25% - 23px)}
.c8{flex-basis:calc(66.666% - 10px)}
.c9{flex-basis:calc(75% - 8px)}
.c5{flex-basis:calc(41.666% - 18px)}
.c7{flex-basis:calc(58.333% - 13px)}
.ta-left{text-align:start}.ta-right{text-align:end}.ta-center{text-align:center}
main>.row,main>.utext{max-width:var(--max);margin:24px auto;padding:0 28px}
.utext{margin:0 0 6px}

h1.tabTitle,.tabTitle{font-size:clamp(23px,2.8vw,34px);color:var(--navy);margin:0 0 .6em;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.blk-title{margin-bottom:.2em}
.blk-sub{color:var(--muted);margin-top:0}

/* cards: flat, bordered, no shadow theatre */
.col.card{background:var(--white);border:1px solid var(--line);border-radius:0;
  display:flex;flex-direction:column;padding:0 0 24px!important;overflow:hidden;height:100%}
.col.card>.fig{margin:0 0 18px;aspect-ratio:16/9;background:var(--surface)}
.col.card>.fig img{width:100%;height:100%;object-fit:cover;max-height:none}
.col.card>h3,.col.card>p,.col.card>.utext,.col.card>a{margin-inline:24px}
.col.card>h3{font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  font-family:"Inter",sans-serif;font-weight:700;margin-top:0;margin-bottom:.6em}
.col.card>p{font-size:15px;line-height:1.68}
.col.card>a.btn{align-self:flex-start;margin-top:auto}

.fig{margin:0 0 20px;overflow:hidden;background:var(--surface);position:relative}
.fig img{width:100%;max-height:420px;object-fit:cover}
/* every photograph can carry its place and year: evidence, not decoration */
.fig .tag,.t .tag{position:absolute;inset-inline-start:0;bottom:0;
  background:rgba(10,29,55,.86);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px}

.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:600;
  padding:12px 26px;border-radius:2px;font-size:14.5px;border:1px solid var(--blue);
  letter-spacing:.03em}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}

/* galleries */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:20px 0}
.grid a{display:block;overflow:hidden;background:var(--surface);aspect-ratio:4/3;position:relative}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.grid a:hover img{transform:scale(1.05)}

/* news */
.news-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:8px 0}
.news-card{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:border-color .2s}
.news-card:hover{text-decoration:none;border-color:var(--blue)}
.news-card .fig{margin:0;aspect-ratio:16/10}
.news-card .fig img{width:100%;height:100%;object-fit:cover;max-height:none}
.news-card .news-body{padding:16px 18px 20px}
.news-card .when{font-size:11.5px;color:var(--muted);margin-bottom:6px;letter-spacing:.06em}
.news-card h3{font-size:16px;line-height:1.42;color:var(--navy);margin:0;
  font-family:"Inter",sans-serif;font-weight:600}
.news-list{display:grid;gap:14px;margin:20px 0}
.news-item{border:1px solid var(--line);padding:18px 20px;background:var(--white)}
.news-item h3{margin-bottom:.25em;font-size:17px}
.news-item .when{color:var(--muted);font-size:13px}

/* ------------------------------------------------------------ the form */
.cform{background:var(--surface);border:1px solid var(--line);padding:28px;margin:26px 0;max-width:780px}
.cform h3{margin-top:0}
.cform .fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:block;font-size:12px;font-weight:700;color:var(--navy);
  margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.cform input,.cform select,.cform textarea{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:2px;font:inherit;font-size:15px;
  background:#fff;color:var(--ink)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,67,96,.12)}
.cform .full{grid-column:1/-1}
.cform textarea{min-height:140px;resize:vertical}
.cform .hp{position:absolute;left:-9999px}
.cform .note{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.cform .msg{margin-top:14px;padding:12px 15px;font-size:14.5px;display:none;border-radius:2px}
.cform .msg.ok{display:block;background:#e8f4ee;color:#12613a;border:1px solid #b7ddc6}
.cform .msg.err{display:block;background:#fceceb;color:#98211f;border:1px solid #f0c4c2}

/* ------------------------------------------------------------- footer */
.site-foot{background:var(--navy);color:#a9c0d2;margin-top:0;padding:0;font-size:14.5px}
.site-foot b{color:#fff}
.site-foot a{color:#bed3e3}
.site-foot a:hover{color:#fff}
.foot-docs,.foot-members,.foot-links{border-bottom:1px solid rgba(255,255,255,.12);
  padding:28px 0}
.foot-docs h3,.foot-members .foot_h h3{color:#fff;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.14em;margin:0 0 16px;font-family:"Inter",sans-serif;font-weight:700}
.doc-row{display:flex;flex-wrap:wrap;gap:8px}
.doc{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid rgba(255,255,255,.24);padding:9px 15px;color:#dbe7f1;font-size:13px;
  font-weight:600;border-radius:2px}
.doc:hover{background:#fff;border-color:#fff;color:var(--navy);text-decoration:none}
.doc.pdf::before{content:"PDF";font-size:9.5px;letter-spacing:.06em;background:rgba(255,255,255,.2);
  padding:2px 5px;border-radius:2px}
.doc.pdf:hover::before{background:var(--navy);color:#fff}
.by_line{display:flex;align-items:center;gap:14px;margin:0 0 12px;flex-wrap:wrap}
.by_line img{height:36px;width:auto;background:#fff;padding:5px 8px;border-radius:2px}
.by_line_txt{color:#c3d5e3;font-size:13.5px}
.link_line{margin:5px 0;font-size:13.5px}
.link_line a::before{content:"›";color:#5f87a8;font-weight:700;margin-inline-end:7px}
.foot-links>.wrap>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:24px;list-style:none;margin:0;padding:0}
.foot-links ul ul{list-style:none;margin:0;padding:0}
.foot-links ul ul li:first-child a{color:#fff;font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em;pointer-events:none}
.foot-links li{margin:.3em 0}
.foot-links a{color:#a9c0d2;font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:38px;justify-content:space-between;padding:30px 0}
.foot-tiny{border-top:1px solid rgba(255,255,255,.12);padding:14px 0 22px;
  font-size:12.5px;color:#7d97ad}

/* ------------------------------------------------------------ responsive */
@media (max-width:980px){
  :root{--head:78px}
  .brand-mark{height:56px}
  .brand-name{font-size:20px}
  .brand{border:0;padding-inline-end:0}
  .burger{display:block}
  .mainnav{display:none;position:absolute;top:var(--head);inset-inline:0;background:#fff;
    padding:10px 20px 20px;border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(10,29,55,.16);max-height:76vh;overflow:auto}
  .mainnav.open{display:block}
  .mainnav>ul{display:block}
  .mainnav li ul{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 16px}
  .head-in{position:relative;flex-wrap:wrap}
  .cform .fields{grid-template-columns:1fr}
  .c6,.c4,.c3,.c8,.c9,.c5,.c7{flex-basis:100%}
  .col[style*="margin:-"]{margin:0 0 18px 0!important}
  .row[style*="max-width"]{max-width:100%!important}
}
@media print{.site-head,.site-foot,.langs,.burger,.side{display:none}body{color:#000}}

/* ============================================================================
   HEADER FIT + HERO TYPOGRAPHY — 6 Sep, second pass
   The wider brand lockup pushed the navigation onto two lines, and the hero
   inherited the old theme's centred inline styles, which turned the headline
   into a giant centred serif block. Both corrected here.
   ============================================================================ */
.mainnav a{padding:10px 11px;font-size:12.5px;letter-spacing:.06em}
.mainnav>ul{flex-wrap:nowrap}
.head-in{gap:18px}
.brand{padding-inline-end:20px}
@media (max-width:1180px){
  .brand-mark{height:62px}
  .brand-name{font-size:21px}
  .mainnav a{padding:10px 8px;font-size:11.5px}
}

/* --- the hero reads left, as in the design: headline, then a quiet subtitle --- */
.hero-inner,.hero-inner *{text-align:start!important}
.hero-inner h1{
  font-size:clamp(30px,4.3vw,56px);line-height:1.04;margin:0 0 .38em;
  max-width:15ch;text-transform:uppercase;font-weight:800;
}
/* everything after the first heading is supporting text, not another headline */
.hero-inner h1~h1,.hero-inner h1~h2,.hero-inner h1~p{
  font-family:"Inter","Segoe UI",sans-serif;font-weight:500;text-transform:none;
  font-size:clamp(16px,1.55vw,20px);line-height:1.55;max-width:46ch;margin:0;
  letter-spacing:0;color:#dce8f2;
}
body.rtl .hero-inner h1~h1,body.rtl .hero-inner h1~h2{font-family:"Assistant",sans-serif}
.hero-inner h1 span,.hero-inner h1 strong{font-size:inherit!important}
.hero-inner br{display:none}
.hero-inner h1~h1 br{display:inline}

/* The old theme painted card borders and accents in the logo's gold. The design
   direction is explicit: zero gold in the interface. Neutralise the inherited
   inline colours without touching the logo itself. */
.col.card[style*="border"],.col.card{border-color:var(--line)!important}
.col.card{border-top:3px solid var(--blue)!important}
.sec[style*="rgb(254, 215, 80)"],.sec[style*="#fed750"],
.sec[style*="rgb(255, 214, 80)"]{background:var(--navy)!important}
.sec[style*="rgb(254, 215, 80)"] *,.sec[style*="rgb(255, 214, 80)"] *{color:#fff!important}
.sec[style*="rgb(254, 215, 80)"] .btn,.sec[style*="rgb(255, 214, 80)"] .btn{
  background:#fff!important;color:var(--navy)!important;border-color:#fff!important}
.tabTitle::after{display:none}
.hero-end{display:none}

/* --- logo larger: it is the company's oldest asset, give it presence --- */
:root{--head:126px}
.brand-mark{height:104px}
.brand-name{font-size:31px}
.brand-sub{font-size:11px;letter-spacing:.38em}
.brand{gap:18px;padding-inline-end:24px}
@media (max-width:1180px){
  :root{--head:104px}
  .brand-mark{height:84px}
  .brand-name{font-size:24px}
}
@media (max-width:980px){
  :root{--head:88px}
  .brand-mark{height:68px}
  .brand-name{font-size:21px}
}

/* Belt and braces: whatever inline sizing the old content carries, the hero
   headline is set by the stylesheet, left-aligned, at a sane scale. */
.hero-inner h1,.hero-inner h1 *{font-size:inherit!important;text-align:start!important}
.hero-inner h1{font-size:clamp(30px,3.6vw,54px)!important}
.hero-inner h1~h1,.hero-inner h1~h1 *{font-size:clamp(15px,1.35vw,19px)!important;
  font-family:"Inter",sans-serif!important;font-weight:500!important;
  text-transform:none!important;color:#dce8f2!important;letter-spacing:0!important}
.hero-inner .sec>.wrap{padding:0}

/* ============================================================================
   THE LOGO, PROPERLY SIZED — Doron, 6 Sep: "you made it very small and unclear.
   make it bigger". It is the company's oldest asset and the whole argument of
   the site; it gets real presence, and is served at 256/512 so the detail in
   the globe and the ribbon stays crisp instead of muddying.
   ============================================================================ */
:root{--head:172px}
.brand-mark{height:150px}
.brand-name{font-size:38px;letter-spacing:.01em}
.brand-sub{font-size:13px;letter-spacing:.42em}
.brand{gap:22px;padding-inline-end:28px}
.head-in{padding-block:10px}
@media (max-width:1400px){
  :root{--head:146px}
  .brand-mark{height:124px}
  .brand-name{font-size:31px}
}
@media (max-width:1180px){
  :root{--head:118px}
  .brand-mark{height:98px}
  .brand-name{font-size:25px}
  .brand-sub{font-size:11px}
}
@media (max-width:980px){
  :root{--head:92px}
  .brand-mark{height:72px}
  .brand-name{font-size:21px}
}

/* The mark already carries the words "R.P.A.PORT LTD" inside it. Setting the
   name again beside it duplicated the company name and crowded the navigation
   off the line, so the wordmark is dropped and the logo speaks for itself. */
.brand-words{display:none}
.brand{border-inline-end:0;padding-inline-end:0;margin-inline-end:12px}
.mainnav{justify-content:flex-end;padding-inline-end:8px}
.mainnav a{padding:10px 13px;font-size:13px}
@media (max-width:1180px){.mainnav a{padding:10px 9px;font-size:12px}}