/* ================= self-hosted fonts =================
   Everything is served from this origin. Nothing is fetched from Google, both
   because the site must work from inside Iran and because a third-party font
   host is a third party watching every visitor. */
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url(../fonts/Vazirmatn-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:'Oswald';src:url(../fonts/Oswald-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Oswald';src:url(../fonts/Oswald-latin-ext.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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';src:url(../fonts/Inter-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Inter';src:url(../fonts/Inter-latin-ext.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Cormorant Garamond';src:url(../fonts/CormorantGaramond-Roman-latin.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/CormorantGaramond-Roman-latin-ext.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Cormorant Garamond';src:url(../fonts/CormorantGaramond-Italic-latin.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
/* ================= design tokens — identical to PSS Lines ================= */
:root{
  --g:#1B3D2E;   --dgr:#224A38;  --iv:#FAF8F4;  --iv2:#EFEDE6;
  --go:#C8A96A;  --ch:#2B2B2B;   --body:#4A4A4A;--pr:#B03A2E;
  --wh:#FFFFFF;  --lgr:#EDEBE4;  --mut:#8A8A82; --cmp:#DAD5C9; --ivm:#D8DDD4;
  --fa:'Vazirmatn',Tahoma,sans-serif;
  --lat:'Oswald',"Arial Narrow",sans-serif;
  --wrap:1240px; --gutter:28px; --hdr-h:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--iv);color:var(--body);font-family:var(--fa);
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
figure{margin:0}
:focus-visible{outline:3px solid var(--go);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--go);color:var(--g);padding:12px 20px;z-index:9999}
.skip:focus{inset-inline-start:0}
/* Latin fragments inside Persian text keep their own direction */
bdi,.lat{unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}

/* ================= layout ================= */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(30px,3.3vw,50px)}
.sec--tight{padding-block:clamp(21px,2.4vw,32px)}
.sec--iv2{background:var(--iv2)}
.sec--g{background:var(--g)}
.sec--g h1,.sec--g h2,.sec--g h3,.sec--g h4{color:var(--iv)}
.sec--g p,.sec--g li{color:var(--ivm)}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}

/* ================= Persian typography =================
   Oswald's condensed uppercase is the PSSUAE signature, but Arabic script has
   no case and letter-spacing breaks the joins. The equivalent here is weight
   and a tighter leading on headings, with the gold rule carrying the accent. */
h1,h2,h3,h4{font-family:var(--fa);color:var(--g);margin:0;font-weight:700;letter-spacing:0}
h1{font-size:clamp(28px,4vw,52px);line-height:1.36;font-weight:800}
h2{font-size:clamp(24px,2.9vw,38px);line-height:1.4}
h3{font-size:19px;font-weight:700;line-height:1.6}
h4{font-size:15px;font-weight:600}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.eyebrow{font-family:var(--fa);font-size:14px;font-weight:600;color:var(--go);margin:0 0 14px;letter-spacing:0}
.eyebrow .lat{font-family:var(--lat);letter-spacing:.2em;text-transform:uppercase;font-size:12.5px}
.rule{width:64px;height:3px;background:var(--go);border:0;margin:22px 0}
.rule--c{margin-inline:auto}
.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.95;color:var(--ch);font-weight:300}
.sec--g .lede{color:var(--ivm)}
.muted{color:var(--body);font-size:14px}
.sec--g .muted{color:rgba(216,221,212,.7)}
.sec-head--c{text-align:center;margin-inline:auto;max-width:760px}

/* ================= buttons ================= */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fa);font-weight:600;
  font-size:15px;padding:14px 30px;border:1.5px solid transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s}
.btn--gold{background:var(--go);color:var(--g)}
.btn--gold:hover{background:var(--g);color:var(--go);border-color:var(--go)}
.btn--ghostL{border-color:var(--go);color:var(--go)}
.btn--ghostL:hover{background:var(--go);color:var(--g)}
.btn--ghostD{border-color:var(--g);color:var(--g)}
.btn--ghostD:hover{background:var(--g);color:var(--iv)}
.btn i{font-style:normal;transition:transform .22s}
/* arrow points the way the language reads */
.btn:hover i{transform:translateX(4px)}

/* ================= utility bar ================= */
.util{background:var(--ch);color:rgba(216,221,212,.74);font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:20px}
.util a:hover{color:var(--go)}
.util .sep{color:rgba(216,221,212,.26);margin-inline:12px}
.util strong{color:var(--iv);font-weight:500}
.util .langs{display:inline-flex;align-items:center;gap:10px}
.util .lang{font-family:var(--lat);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--go)}
.util .lang--fa{font-family:var(--fa);font-size:13px;letter-spacing:0;text-transform:none}
.util .lang.is-on{color:var(--iv);border-bottom:1.5px solid var(--go);padding-bottom:1px}
.util__co{color:rgba(216,221,212,.62)}
@media (max-width:900px){.util__co{display:none}}
/* Email addresses are assembled in the browser so scrapers never see them in
   the served HTML. Nothing else on the page prints the address as plain text. */
.eml{white-space:nowrap}

/* ================= header ================= */
.hdr{background:var(--g);position:sticky;top:0;z-index:800;border-bottom:1px solid rgba(200,169,106,.28)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand img{width:52px;height:52px}
.brand .bt span{display:block;font-family:var(--fa);color:var(--wh);font-weight:700;font-size:21px;line-height:1.3}
.brand .bt em{display:block;font-style:normal;color:var(--go);font-weight:500;font-size:12px;line-height:1.4;margin-top:3px}
.hdr nav{min-width:0}
.nav{display:flex;align-items:center;gap:24px;list-style:none;margin-block:0;padding:0;flex-wrap:nowrap}
.nav>li>a{white-space:nowrap}
.nav>li{position:relative}
.nav__div{width:1.5px;height:30px;background:rgba(200,169,106,.62);flex:0 0 1.5px}
.nav>li>a{font-family:var(--fa);font-size:15.5px;font-weight:500;color:var(--ivm);padding-block:14px;display:block;position:relative}
.nav>li>a::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:100%;bottom:6px;height:2px;background:var(--go);transition:inset-inline-end .25s}
.nav>li:hover>a,.nav>li.on>a,
.nav>li.current-menu-item>a,.nav>li.current-menu-ancestor>a,
.nav>li.current_page_item>a,.nav>li.current_page_ancestor>a{color:var(--wh)}
.nav>li:hover>a::after,.nav>li.on>a::after,
.nav>li.current-menu-item>a::after,.nav>li.current-menu-ancestor>a::after,
.nav>li.current_page_item>a::after,.nav>li.current_page_ancestor>a::after{inset-inline-end:0}
.nav .sub-menu,.nav .sub{position:absolute;top:100%;inset-inline-start:-18px;background:var(--dgr);min-width:280px;padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;border-top:2px solid var(--go);
  box-shadow:0 18px 40px rgba(0,0,0,.28);list-style:none;margin:0;z-index:10}
.nav>li:hover .sub-menu,.nav>li:focus-within .sub-menu,
.nav>li:hover .sub,.nav>li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a,.nav .sub a{display:block;padding:9px 22px;font-size:13.5px;color:var(--ivm)}
.nav .sub-menu a:hover,.nav .sub a:hover{background:rgba(200,169,106,.14);color:var(--go)}
.hdr .btn{padding:11px 22px;font-size:14px;white-space:nowrap;flex:0 0 auto;margin-inline-start:auto;margin-inline-end:18px}
.burger{display:none;margin-inline-start:auto;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:26px;height:2px;background:var(--go);margin:5px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob{display:none;background:var(--dgr);border-top:1px solid rgba(200,169,106,.28)}
.mob.open{display:block}
.mob ul{list-style:none;margin:0;padding:8px 0}
.mob a{display:block;padding:12px var(--gutter);color:var(--ivm);font-size:15.5px}
.mob .sub-menu,.mob .sub{list-style:none;margin:0;padding:0}
.mob .sub-menu a,.mob .sub a{padding-inline-start:calc(var(--gutter) + 20px);font-size:14.5px;color:rgba(216,221,212,.78)}

/* =================================================================
   floating contact rail — mirrored to the inline-start edge, which in
   Persian is the left. Rows sit collapsed to their mark; hover or tab
   widens one row inwards to reveal its label.
   ================================================================= */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:700;direction:ltr;
  display:flex;flex-direction:column;align-items:flex-start}
/* Rows are laid out LTR whatever the page direction: the mark stays pinned to
   the screen edge and the label opens inwards, away from it. */
.rail a,.rail button{direction:ltr;display:flex;align-items:center;width:59px;min-height:54px;overflow:hidden;
  border:0;border-left:5px solid var(--go);padding:0;cursor:pointer;
  background:var(--g);color:var(--go);font-family:var(--fa);font-size:14px;font-weight:600;
  white-space:nowrap;box-shadow:7px 0 22px rgba(0,0,0,.20);
  transition:width .26s ease,background .2s,color .2s}
.rail>*:first-child{border-top-right-radius:12px}
.rail>*:last-child{border-bottom-right-radius:12px}
.rail svg{width:22px;height:22px;flex:0 0 22px;margin:0 16px;fill:currentColor}
.rail span{direction:rtl;flex:1;text-align:center;padding-inline:6px 18px;font-size:13.5px;opacity:0;transition:opacity .2s ease}
.rail a:hover,.rail button:hover,.rail a:focus-visible,.rail button:focus-visible{
  width:152px;background:var(--dgr);color:var(--wh);
  border-top-right-radius:12px;border-bottom-right-radius:12px}
.rail a:hover span,.rail button:hover span,
.rail a:focus-visible span,.rail button:focus-visible span{opacity:1}
.rail a+a,.rail a+button,.rail button+a{box-shadow:7px 0 22px rgba(0,0,0,.20),inset 0 1px 0 rgba(200,169,106,.28)}
@media (prefers-reduced-motion:reduce){.rail a,.rail button,.rail span{transition:none}}

/* ================= hero ================= */
.hero{position:relative;background:var(--g);overflow:hidden;min-height:620px;display:flex;align-items:center}
.hero__plate{position:absolute;inset:0 50% 0 0;background:var(--iv);
  clip-path:polygon(0 0,89% 0,100% 100%,0 100%)}
.hero__plate img{width:100%;height:100%;object-fit:cover}
.hero__plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(27,61,46,.55),rgba(27,61,46,.14) 62%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:76px}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hero__copy{max-width:620px}
.hero__copy h1{color:var(--wh)}
.hero__copy .lede{margin:24px 0 32px;color:var(--ivm);font-size:clamp(15px,1.55vw,19px)}
.hero__actions .btn{font-size:13px;padding:13px 28px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__mark{display:none}
.hero__creds{list-style:none;margin:34px 0 0;padding:26px 0 0;display:flex;flex-wrap:wrap;gap:14px 34px;
  border-top:1px solid rgba(200,169,106,.32)}
.hero__creds li{font-size:14px;color:var(--cmp);position:relative;padding-inline-start:16px}
.hero__creds li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:7px;height:7px;background:var(--go)}
.hero__creds b{color:var(--go);font-weight:700}
.hero__disc{font-family:var(--fa);font-size:14px;color:var(--cmp);text-align:center;line-height:2.2;font-weight:500}
.hero__disc b{color:var(--go);font-weight:700}

/* ================= stats ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{text-align:center;padding:16px 20px;border-inline-start:1px solid rgba(200,169,106,.3)}
.stat:first-child{border-inline-start:0}
.stat b{display:block;font-family:var(--fa);font-size:clamp(38px,4.6vw,58px);color:var(--go);font-weight:800;line-height:1.2}
.stat span{display:block;font-size:14.5px;color:var(--ivm);margin-top:10px;font-weight:500}
.stat em{display:block;font-style:normal;font-size:12.5px;color:rgba(216,221,212,.55);margin-top:5px}

/* ================= tiles / cards ================= */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--cmp);border:1px solid var(--cmp)}
.tile{background:var(--iv);padding:34px 28px 30px;border-top:3px solid transparent;transition:.25s;display:flex;flex-direction:column}
.tile:hover{background:var(--g);border-top-color:var(--go)}
.tile:hover h3,.tile:hover h2,.tile:hover p{color:var(--iv)}
.tile:hover .tile__ic{border-color:var(--go);background:var(--go)}
.tile:hover .tile__ic svg{stroke:var(--g)}
.tile:hover .tile__go{color:var(--go)}
.tile__head{display:flex;align-items:center;gap:14px;margin-bottom:14px;min-height:58px}
/* A two-line title would otherwise start its paragraph lower than the rest
   of the row, which reads as a misalignment rather than a variation. */
.tile__ic{width:48px;height:48px;flex:0 0 48px;border:1.5px solid var(--cmp);display:flex;align-items:center;justify-content:center;transition:.25s}
.tile__ic svg{width:24px;height:24px;stroke:var(--g);fill:none;stroke-width:1.6;transition:.25s}
.tile h3,.tile h2{font-size:17px;margin:0;line-height:1.4;transition:.25s}
.tile p{font-size:15px;line-height:1.85;margin:0 0 16px;transition:.25s}
.tile__go{font-size:14px;font-weight:600;color:var(--g);transition:.25s;margin-top:auto}

.card{background:var(--iv);border:1px solid var(--cmp);padding:30px 26px 26px;position:relative;
  transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;inset-inline-start:0;top:0;height:3px;width:0;background:var(--go);transition:width .3s}
.card:hover{border-color:var(--g);transform:translateY(-4px);box-shadow:0 16px 40px rgba(27,61,46,.13)}
.card:hover::before{width:100%}
.card h3,.card h2{font-size:17px;margin-bottom:9px;line-height:1.45}
.card p{font-size:15px;line-height:1.8;margin:0 0 14px}
.card__go{font-size:14px;font-weight:600;color:var(--go);margin-top:auto}
.card__meta{font-size:13px;color:var(--mut);margin-bottom:10px}

/* ================= prose lists ================= */
.plist{margin:0;padding:0;list-style:none}
.plist li{padding-inline-start:26px;position:relative;margin-bottom:11px;font-size:15.5px;line-height:1.9}
.plist li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:12px;height:1.5px;background:var(--go)}

/* ================= chips ================= */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chipgrp{margin-top:26px}
.chipgrp:first-child{margin-top:0}
.chipgrp h3{margin:0 0 12px}
/* A coverage list is a lot of chips. Beside a picture they wrap into a narrow
   ribbon; across the full width they read as a map of where we work. */
.chipwide{max-width:none}
.chipgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 46px;margin-top:26px}
.chipgrid .chipgrp{margin-top:0;margin-bottom:22px}
@media (max-width:820px){.chipgrid{grid-template-columns:1fr}}
.chips li{background:var(--iv2);border:1px solid var(--cmp);padding:8px 16px;font-size:14.5px;color:var(--g)}
.sec--g .chips li{background:rgba(250,248,244,.06);border-color:rgba(216,221,212,.22);color:var(--ivm)}

/* ================= frame ================= */
.frame{position:relative}
.frame img{width:100%;object-fit:cover}
.frame--gold{box-shadow:8px 8px 0 var(--go)}
.cap{font-size:13px;color:var(--mut);margin-top:22px}

/* ================= gallery with labelled carousel ================= */
.gwrap{position:relative}
.glab{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;list-style:none;padding:0}
.glab button{background:var(--iv2);border:1px solid var(--cmp);padding:8px 16px;font-size:14.5px;
  cursor:pointer;color:var(--g);font-family:var(--fa);transition:.2s}
.glab button[aria-selected="true"]{background:var(--g);border-color:var(--g);color:var(--iv)}
.glab button:hover{border-color:var(--g)}
.gstage{position:relative;overflow:hidden;background:var(--lgr);aspect-ratio:16/9}
.gslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.gslide.on{opacity:1;visibility:visible}
.gslide img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.gcap{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(to top,rgba(27,61,46,.88),transparent);
  color:var(--iv);padding:38px 24px 18px;font-size:14.5px}
.garw{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  display:grid;place-items:center;border:0;cursor:pointer;font-size:24px;line-height:1;
  background:rgba(27,61,46,.62);color:var(--iv);opacity:0;transition:opacity .25s,background .25s}
.garw--p{right:0}
.garw--n{left:0}
.garw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gwrap:hover .garw,.garw:focus-visible{opacity:1}
.garw:hover{background:var(--g)}

/* ================= FAQ accordion ================= */
.acc{border-top:1px solid var(--cmp);margin-top:34px}
.acc__i{border-bottom:1px solid var(--cmp)}
.acc__h{margin:0;font-size:inherit;font-weight:inherit}
.acc__q{width:100%;text-align:start;background:none;border:0;cursor:pointer;
  padding:20px 0;padding-inline-end:48px;position:relative;line-height:1.65;
  font-family:var(--fa);font-size:17px;font-weight:600;color:var(--g);transition:color .2s}
.acc__q::after{content:"";position:absolute;inset-inline-end:10px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--go);border-bottom:2px solid var(--go);
  transform:rotate(45deg);transition:transform .25s,top .25s}
.acc__i.open .acc__q{color:var(--go)}
.acc__i.open .acc__q::after{transform:rotate(-135deg);top:32px}
.acc__q:hover{color:var(--go)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.acc__a>div{padding:0 0 22px;padding-inline-end:48px;font-size:15.5px;line-height:1.95}
@media (prefers-reduced-motion:reduce){.acc__a{transition:none}}

/* ================= CTA band ================= */
.band{background:var(--go)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:34px;padding-block:26px}
.band h2{color:var(--g);max-width:740px;font-size:clamp(22px,2.4vw,32px)}
.band p{margin:10px 0 0;color:rgba(27,61,46,.78);font-size:15.5px}
.band .btn{background:var(--g);color:var(--go);white-space:nowrap}
.band .btn:hover{background:var(--ch)}

/* ================= footer ================= */
.ftr{background:var(--g);color:var(--ivm);padding-top:clamp(26px,2.4vw,34px);padding-bottom:0}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(26px,3.6vw,52px)}
.ftr .ftr__h{font-size:14px;color:var(--go);margin:0 0 14px;font-weight:700;line-height:1.5;text-transform:none}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{margin-bottom:7px}
.ftr a{font-size:15px;color:var(--ivm)}
.ftr a:hover{color:var(--go)}
.ftr p{font-size:15px;line-height:1.95}
.ftr .brand{margin-bottom:14px}
.ftr__lead{font-size:14.5px;color:var(--ivm);margin:0 0 16px}
.btn--dl{padding:13px 24px;font-size:14px;width:100%;justify-content:center}
.btn--dl .dl{font-style:normal;margin-inline-start:8px;transition:transform .22s}
.btn--dl:hover .dl{transform:translateY(3px)}
.ftr__offices{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;margin:0}
.ftr__offices a{color:var(--ivm)}
.ftr__offices a:hover{color:var(--go)}
.ftr__offices span{color:rgba(200,169,106,.55)}
.ftr .brand .bt span{font-size:19px}
.contactline{display:flex;gap:10px;margin-bottom:10px;font-size:15px;align-items:flex-start}
.contactline b{color:var(--go);font-weight:600;font-size:13.5px;min-width:62px;padding-top:2px}
.contactline span,.contactline a{color:var(--iv)}
.legal{border-top:1px solid rgba(216,221,212,.16);margin-top:clamp(20px,1.9vw,28px);padding-block:14px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}
.legal a{color:rgba(216,221,212,.72)}
.legal .links{display:flex;gap:22px;flex-wrap:wrap}
.legal .ph{color:rgba(216,221,212,.42)}
/* An office named but not linked keeps the row's rhythm without pretending to
   be clickable. */
.ftr__office{color:rgba(216,221,212,.5);cursor:default}

.stbd{background:var(--ch);padding-block:13px}
.stbd .wrap{display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:20px}
.stbd .mid,.stbd .side--p{direction:rtl}
/* Starboard reads lamp-then-label, so the word sits outboard of the green
   light. Port is left as it was. */
.stbd .side--s{direction:ltr}
.stbd .side{display:flex;align-items:center;gap:11px;font-size:13px;color:rgba(216,221,212,.58)}
.stbd .lamp{width:11px;height:11px;border-radius:50%}
.stbd .lamp--p{background:var(--pr)}
.stbd .lamp--s{background:#017457}
.stbd .mid{font-size:13px;color:rgba(216,221,212,.68);text-align:center}
.stbd .mid b{color:var(--iv);font-weight:700}
.stbd .mid .bar{color:rgba(216,221,212,.28);margin-inline:12px}
.stbd .mid i{font-style:normal;color:var(--go)}
@media (max-width:1100px){.stbd .mid i,.stbd .mid .bar:last-of-type{display:none}}
@media (max-width:900px){.stbd .mid{font-size:12px}.stbd .side{display:none}}

/* ================= responsive ================= */
@media (max-width:1180px){
  .nav{gap:17px}
  .nav>li>a{font-size:14.5px}
  .hdr .btn{margin-inline-end:6px}
  .tiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  :root{--hdr-h:80px}
  .nav,.hdr .btn{display:none}
  .burger{display:block}
  /* The plate is a sibling of the copy, not a grid cell, so the hero itself has
     to become a column or the photograph sits beside the text as a half-width
     block instead of becoming a band above it. */
  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  .hero__plate{position:relative;inset:auto;width:100%;height:clamp(200px,32vw,300px);
    clip-path:none;order:-1;flex:0 0 auto}
  .hero__plate img{height:100%}
  .hero__plate::after{display:none}
  .hero__inner{padding-block:44px}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__mark{display:none}
  .split{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .band .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .g2,.g3,.tiles{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  /* no hover on a phone, so every rail label is shown outright */
  .rail{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;align-items:stretch;border-top:3px solid var(--go)}
  .rail a,.rail button{width:auto;flex:1;justify-content:center;min-height:54px;border-left:0;border-radius:0;box-shadow:none}
  .rail a:hover,.rail button:hover,.rail a:focus-visible,.rail button:focus-visible{width:auto;border-radius:0}
  .rail svg{margin:0}
  .rail span{display:none}
  body{padding-bottom:54px}
  .stat{border-inline-start:0}
}
@media print{.rail,.util,.burger{display:none}}/* =========================================================================
   English tree — direction and typography overrides.

   The base sheet is written Persian-first: Vazirmatn, no uppercase, no
   letter-spacing, and a handful of physical offsets that put the photo plate
   and the contact rail on the correct side for RTL. Everything below mirrors
   those and restores the Oswald/Inter/Cormorant voice that PSSUAE uses.
   ========================================================================= */

[dir="ltr"]{
  --fa:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --head:'Oswald',"Arial Narrow",Impact,sans-serif;
  --serif:'Cormorant Garamond',Georgia,"Times New Roman",serif;
}
[dir="ltr"] body{line-height:1.7}

/* ---- headings regain case and tracking, which Arabic script cannot take ---- */
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4{
  font-family:var(--head);font-weight:600;letter-spacing:.01em}
[dir="ltr"] h1{font-size:clamp(32px,4.6vw,60px);line-height:1.05;font-weight:700;text-transform:uppercase}
[dir="ltr"] h2{font-size:clamp(26px,3.1vw,42px);line-height:1.1;text-transform:uppercase}
[dir="ltr"] h3{font-size:20px;text-transform:uppercase;letter-spacing:.02em}
[dir="ltr"] h4{font-size:16px;text-transform:uppercase;letter-spacing:.06em}
[dir="ltr"] .eyebrow{font-family:var(--head);font-size:13px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase}
[dir="ltr"] .lede{font-family:var(--serif);font-style:normal;
  font-size:clamp(19px,2vw,25px);line-height:1.5;font-weight:500}
[dir="ltr"] .btn{font-family:var(--head);font-weight:500;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase}
[dir="ltr"] .nav>li>a{font-family:var(--head);font-size:14px;
  letter-spacing:.13em;text-transform:uppercase}
[dir="ltr"] .brand .bt span{font-family:var(--head);letter-spacing:.06em}
[dir="ltr"] .brand .bt em{font-family:var(--head);letter-spacing:.3em;font-size:11.5px}
[dir="ltr"] .tile__go,[dir="ltr"] .card__go{font-family:var(--head);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}
[dir="ltr"] .stat span{font-family:var(--head);font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase}
[dir="ltr"] .ftr .ftr__h{font-family:var(--head);letter-spacing:.22em}
[dir="ltr"] .ftr .ftr__h{text-transform:uppercase}
[dir="ltr"] .acc__q{font-family:var(--head);font-size:16.5px;font-weight:500}
[dir="ltr"] .glab button{font-family:var(--head);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase}
[dir="ltr"] .util .lang--fa{font-family:var(--fa)}

/* ---- the arrow inside a button travels the way the language reads ---- */
[dir="rtl"] .btn:hover i{transform:translateX(-4px)}
[dir="ltr"] .btn:hover i{transform:translateX(4px)}

/* ---- hero plate: photo on the far side from the copy ---- */
[dir="ltr"] .hero__plate{inset:0 0 0 50%;clip-path:polygon(11% 0,100% 0,100% 100%,0 100%)}
[dir="ltr"] .hero__plate::after{background:linear-gradient(to right,rgba(27,61,46,.55),rgba(27,61,46,.14) 62%)}

/* ---- gold offset frame falls away from the text column ---- */
[dir="ltr"] .frame--gold{box-shadow:-8px 8px 0 var(--go)}

/* ---- contact rail: inline-end edge in both directions, so left in Persian
        and right in English, with the mark always pinned to that edge ---- */
[dir="ltr"] .rail{left:auto;right:0;align-items:flex-end}
[dir="ltr"] .rail a,[dir="ltr"] .rail button{
  direction:rtl;border-left:0;border-right:5px solid var(--go);
  box-shadow:-7px 0 22px rgba(0,0,0,.20)}
[dir="ltr"] .rail>*:first-child{border-top-right-radius:0;border-top-left-radius:12px}
[dir="ltr"] .rail>*:last-child{border-bottom-right-radius:0;border-bottom-left-radius:12px}
[dir="ltr"] .rail a:hover,[dir="ltr"] .rail button:hover,
[dir="ltr"] .rail a:focus-visible,[dir="ltr"] .rail button:focus-visible{
  border-top-right-radius:0;border-bottom-right-radius:0;
  border-top-left-radius:12px;border-bottom-left-radius:12px}
[dir="ltr"] .rail span{direction:ltr}
[dir="ltr"] .rail a+a,[dir="ltr"] .rail a+button,[dir="ltr"] .rail button+a{
  box-shadow:-7px 0 22px rgba(0,0,0,.20),inset 0 1px 0 rgba(200,169,106,.28)}

/* ---- gallery arrows: "previous" points back towards the start of the line ---- */
[dir="rtl"] .garw--p{right:0;left:auto}
[dir="rtl"] .garw--n{left:0;right:auto}
[dir="ltr"] .garw--p{left:0;right:auto}
[dir="ltr"] .garw--n{right:0;left:auto}
[dir="ltr"] .garw--p svg{transform:scaleX(-1)}
[dir="ltr"] .garw--n svg{transform:scaleX(-1)}

@media (max-width:600px){
  [dir="ltr"] .rail{left:0;right:0}
  [dir="ltr"] .rail a,[dir="ltr"] .rail button{border-right:0;border-radius:0}
}

/* =========================================================================
   Things the mockup did not need but a real site does.
   ========================================================================= */

/* Skip link, focus ring and reduced motion are already in the base sheet. */

.crumbs{background:var(--iv2);font-size:13.5px}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:11px}
.crumbs a{color:var(--body)}
.crumbs a:hover{color:var(--g)}
.crumbs [aria-current]{color:var(--mut)}
.crumbs .s{color:var(--cmp)}

.phero{background:var(--g);position:relative;overflow:hidden}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(44px,4.6vw,72px)}
.phero h1{color:var(--wh);max-width:24ch}
.phero .lede{color:var(--ivm);margin-top:20px}
.phero__bg{position:absolute;inset:0;opacity:.16}
.phero__bg img{width:100%;height:100%;object-fit:cover}

/* An empty optional section must not leave an empty wrapper behind. */
.sec:empty,.sec .wrap:empty{display:none}

.pss-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.alert{padding:15px 20px;margin-bottom:20px;font-size:15px;border-inline-start:3px solid}
.alert--ok{background:rgba(1,116,87,.10);border-color:#017457;color:#0d5c48}
.alert--bad{background:rgba(176,58,46,.10);border-color:var(--pr);color:#8e2d24}
.sec--g .alert--ok{background:rgba(200,169,106,.14);border-color:var(--go);color:var(--iv)}
.sec--g .alert--bad{background:rgba(176,58,46,.20);border-color:var(--pr);color:var(--iv)}

/* =========================================================================
   Beyond the homepage — forms, prose, pagination.
   ========================================================================= */

.split--rev>*:first-child{order:2}

/* ---- rich text ----
   A body column that stops at 78ch inside a 1240px wrap looked like text that
   had been cut off rather than set. Where the block has a heading, the heading
   takes its own rail and the pair fills the width; where it does not, the text
   is centred at a deliberate measure. */
.rtx{max-width:none}
.rtx__head .rule{margin:18px 0 0}
.rtx--split{display:grid;grid-template-columns:minmax(230px,0.82fr) minmax(0,1.9fr);gap:clamp(28px,4.4vw,74px);align-items:start}
.rtx--split .rtx__head{position:sticky;top:calc(var(--hdr-h) + 26px)}
.rtx--split .rtx__head h2{font-size:clamp(22px,2.5vw,33px)}
.rtx--narrow{max-width:70ch}
.rtx--centre{max-width:70ch;margin-inline:auto;text-align:center}
.rtx--centre .rule{margin-inline:auto}
@media (max-width:900px){
  .rtx--split{grid-template-columns:1fr;gap:20px}
  .rtx--split .rtx__head{position:static}
}

.prose{max-width:none}
.prose h2{margin:38px 0 12px}
.prose h3{margin:28px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:0;list-style:none}
.prose ul li{padding-inline-start:26px;position:relative;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:12px;height:1.5px;background:var(--go)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;padding-inline-start:34px;position:relative;margin-bottom:9px}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;inset-inline-start:0;top:0;
  font-weight:700;font-size:13px;color:var(--go)}
.prose a{color:var(--g);border-bottom:1px solid var(--go)}
.prose a:hover{color:var(--go)}
.sec--g .prose a{color:var(--iv)}

/* ---- forms ---- */
.form{background:var(--dgr);padding:clamp(26px,3vw,42px);border-top:3px solid var(--go)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid .full{grid-column:1/-1}
.fgrid p{margin:0}
.form label{display:block;font-size:13px;font-weight:600;color:var(--go);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:rgba(250,248,244,.05);
  border:1px solid rgba(216,221,212,.26);color:var(--iv);padding:11px 13px;font-size:15px;
  font-family:inherit;border-radius:0;transition:border-color .2s,background .2s}
.form input::placeholder,.form textarea::placeholder{color:rgba(216,221,212,.42)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--go);background:rgba(250,248,244,.09)}
.form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--go) 50%),linear-gradient(135deg,var(--go) 50%,transparent 50%);
  background-position:calc(100% - 19px) 19px,calc(100% - 13px) 19px;background-size:6px 6px;background-repeat:no-repeat}
[dir="rtl"] .form select{background-position:13px 19px,19px 19px}
.form textarea{min-height:104px;resize:vertical}
.form .btn{margin-top:20px;width:100%;justify-content:center}
.form .note{font-size:12.5px;color:rgba(216,221,212,.55);margin:12px 0 0;text-align:center}
.cf-turnstile{margin-top:8px}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}}

/* ---- pagination ---- */
.pagination{margin-top:34px;display:flex;justify-content:center}
.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid var(--cmp);color:var(--g);font-weight:600;transition:.2s}
.page-numbers:hover{border-color:var(--g);background:var(--g);color:var(--iv)}
.page-numbers.current{background:var(--g);border-color:var(--g);color:var(--iv)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================================
   Review pass, 19 August.
   ========================================================================= */

/* A button whose target does not exist yet keeps its place in the layout but
   cannot be clicked — better than a hole where the design expects a control. */
.btn.is-off{opacity:.42;cursor:not-allowed;pointer-events:none}

/* English typography, trimmed against the Persian tree. */
[dir="ltr"] .lede{font-size:clamp(17px,1.85vw,23px)}
[dir="ltr"] .stat b{font-size:clamp(36px,4.4vw,56px)}
[dir="ltr"] .nav>li>a{font-size:13px}

/* ---- headings share the Persian scale ----
   The faces stay English — Oswald for headings, Inter for body — but the sizes
   are the Persian ones, so a reader switching languages on the same page does
   not see the type jump. Oswald is condensed, so at an identical size it still
   occupies less width; that is the point of matching numbers rather than
   optical weight. */
[dir="ltr"] h1{font-size:clamp(28px,4vw,52px)}
[dir="ltr"] h2{font-size:clamp(24px,2.9vw,38px)}
[dir="ltr"] h3{font-size:19px}
[dir="ltr"] h4{font-size:15px}

/* The inner-page hero runs long in English — a service name or a calculator
   title is three or four words where the Persian is two — so it takes a
   smaller step than the front page. The gold eyebrow above it is unchanged. */
[dir="ltr"] .phero h1{font-size:clamp(24px,3.7vw,48px)}
[dir="ltr"] .phero .lede{font-size:clamp(15px,1.7vw,21px)}

/* A phone number is a left-to-right sequence even inside Persian text. Left to
   the bidi algorithm, "۰۲۱-۲۱۰۰۱۴۰۸" reorders around the hyphen and renders as
   "۲۱۰۰۱۴۰۸-۰۲۱". Isolation alone is not enough; the run needs an explicit
   direction. */
.num{unicode-bidi:isolate;direction:ltr;font-variant-numeric:tabular-nums}

/* ---- byline, search ---- */
.byline{margin-top:22px;font-size:14.5px;color:var(--cmp)}
.byline b{color:var(--iv);font-weight:600}
.byline .sep{color:rgba(200,169,106,.6);margin-inline:8px}
.byline__upd{color:rgba(216,221,212,.62)}
.searchform{display:flex;gap:10px;max-width:520px}
.searchform input{flex:1;border:1px solid var(--cmp);background:var(--wh);padding:12px 14px;font:inherit}
.searchform input:focus{outline:0;border-color:var(--g)}

/* A service card carries the tile's icon-and-title head. */
.card--svc .tile__head{margin-bottom:12px}
.card--svc .tile__ic{width:44px;height:44px;flex:0 0 44px}
.card--svc .tile__ic svg{width:22px;height:22px;stroke:var(--g)}

/* ---- accessibility and print ---- */
/* A tab that is not selected is still reachable with the arrow keys, so it
   needs a visible focus ring even though it is out of the tab order. */
.glab button:focus-visible{outline:3px solid var(--go);outline-offset:2px}
.gslide:focus-visible{outline:3px solid var(--go);outline-offset:-3px}
.plist a{color:var(--g);border-bottom:1px solid var(--go)}
.plist a:hover{color:var(--go)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .rail,.util,.burger,.mob,.band,.stbd,.crumbs,.form,.searchform{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hdr{background:none;border-bottom:1px solid #000;position:static}
  .hdr .brand .bt span,.hdr .brand .bt em{color:#000}
  .nav{display:none}
  .sec,.sec--g,.sec--iv2{background:none!important;padding-block:12pt}
  .sec--g h1,.sec--g h2,.sec--g h3,.sec--g p,.sec--g li{color:#000!important}
  .hero{min-height:0}
  .hero__plate{display:none}
  .hero__copy h1,.hero__copy .lede{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .ftr{background:none;color:#000;border-top:1px solid #000}
  .ftr .ftr__h,.ftr a,.ftr p{color:#000}
}

/* =========================================================================
   Responsive QA pass.
   ========================================================================= */

/* The rail is fixed to the viewport edge while the content is centred in a
   1240px wrap, so below roughly that width it starts covering the page. Dock it
   to the bottom as a labelled bar from tablet down, not only on phones. */
@media (max-width:1100px){
  .rail{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;
    align-items:stretch;border-top:3px solid var(--go)}
  .rail a,.rail button{width:auto;flex:1;justify-content:center;min-height:54px;
    border-left:0;border-right:0;border-radius:0;box-shadow:none;direction:ltr}
  .rail a:hover,.rail button:hover,.rail a:focus-visible,.rail button:focus-visible{
    width:auto;border-radius:0}
  .rail svg{margin:0}
  .rail span{display:none}
  body{padding-bottom:54px}
  [dir="ltr"] .rail{left:0;right:0}
  [dir="ltr"] .rail a,[dir="ltr"] .rail button{border-right:0;border-radius:0}
}

/* The utility bar carries four things that will not fit on a phone. Keep the
   phone number and the language switch — the two anyone actually reaches for. */
@media (max-width:820px){
  .util .wrap{justify-content:space-between;gap:10px}
  .util__co,.util__mail,.util__sep-mail{display:none}
}
@media (max-width:520px){
  .util{font-size:12px}
  .util .wrap{min-height:36px}
}

/* Two figures per row reads better than a single tall column. */
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:14px 10px}
  .stat b{font-size:clamp(30px,9vw,40px)}
  .stat span{font-size:13px}
  .stat em{font-size:11.5px}
}
/* Two up holds down to a small phone; one per row made the band 700px tall. */
@media (max-width:359px){
  .stats{grid-template-columns:1fr}
}

/* Nothing may push the page sideways in either direction. */
html,body{overflow-x:hidden;max-width:100%}
img,table,pre{max-width:100%}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* =========================================================================
   Reference tools
   The calculator is a light panel on ivory; the tariff table below it is the
   substance and stays legible on its own. Figures are Latin digits in both
   languages, so every numeric cell is dir="ltr" in the markup and the column
   alignment follows the reading direction of the page, not of the number.
   ========================================================================= */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:0;
  border:1px solid var(--cmp);background:var(--wh)}
.tool--wide{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}
.tool__form{padding:clamp(20px,2.2vw,30px);display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;align-content:start}
.tool--wide .tool__form{grid-template-columns:1fr 1fr 1fr}
.tool__f{margin:0;min-width:0}
.tool__f label{display:block;font-size:13px;font-weight:600;color:var(--g);margin-bottom:6px}
.tool__f input,.tool__f select{width:100%;background:var(--iv);border:1px solid var(--cmp);color:var(--ch);
  padding:10px 12px;font-size:15px;font-family:inherit;border-radius:0;transition:border-color .2s}
.tool__f input:focus,.tool__f select:focus{outline:0;border-color:var(--go);background:var(--wh)}
.tool__f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--go) 50%),linear-gradient(135deg,var(--go) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 11px) 18px;background-size:6px 6px;background-repeat:no-repeat}
[dir="rtl"] .tool__f select{background-position:11px 18px,17px 18px}
.tool__hint{display:block;margin-top:6px;font-size:12px;line-height:1.7;color:var(--mut)}
.tool__f:has(.js-special){grid-column:span 2}

.tool__out{background:var(--g);color:var(--iv);padding:clamp(20px,2.2vw,28px);border-inline-start:3px solid var(--go)}
.tool__total{margin:0 0 14px;font-size:clamp(26px,3.2vw,34px);font-weight:700;color:var(--wh);
  line-height:1.3;letter-spacing:-.01em}
.tool__total .js-total{unicode-bidi:isolate;direction:ltr;display:inline-block}
.tool__total em{font-style:normal;font-size:15px;font-weight:600;color:var(--go)}
.tool__out .tbl{background:transparent;font-size:13px}
.tool__out .tbl th{color:var(--go);border-bottom-color:rgba(200,169,106,.4);padding:7px 9px;font-size:11.5px}
.tool__out .tbl td{color:rgba(250,248,244,.9);border-bottom-color:rgba(216,221,212,.14);padding:8px 9px}
.tool__out .tbl tr:last-child td{font-weight:700;color:var(--wh)}
.tool__note{margin:12px 0 0;font-size:13px;line-height:1.8;color:rgba(216,221,212,.72)}
.tool__note:empty{display:none}
.tool__src{margin:14px 0 0;font-size:13px;line-height:1.9;color:var(--mut)}
.tool__src a{color:var(--g);border-bottom:1px solid var(--go)}
.tool__src a:hover{color:var(--go)}
.tool__src .s{color:var(--go);margin:0 6px}

/* ---- tariff tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--wh)}
.tbl th{text-align:start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g);padding:11px 14px;border-bottom:2px solid var(--go);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--lgr);color:var(--body);vertical-align:top}
.tbl tbody tr:nth-child(even){background:var(--iv)}
.tool__out .tbl tbody tr:nth-child(even){background:rgba(250,248,244,.05)}
.tbl td[dir="ltr"],.tbl td.num{white-space:nowrap}
/* The currency sits beside the figure, quieter than it. */
.tbl td.num{font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .tool,.tool--wide{grid-template-columns:1fr}
  .tool__out{border-inline-start:0;border-top:3px solid var(--go)}
}
@media (max-width:560px){
  .tool__form,.tool--wide .tool__form{grid-template-columns:1fr}
  .tool__f:has(.js-special){grid-column:auto}
  .tbl th,.tbl td{padding:9px 10px;font-size:13.5px}
}


/* =========================================================================
   Artwork, marks and notices
   ========================================================================= */

/* ---- figure ---- */
.fig{margin:0}
.fig img{width:100%;object-fit:cover;display:block}
.fig--r-wide img{aspect-ratio:16/9}
.fig--r-panorama img{aspect-ratio:21/9}
.fig--r-natural img{aspect-ratio:auto}
.fig figcaption{margin-top:12px;font-size:13.5px;color:var(--mut);line-height:1.8}
.fig--standard{max-width:860px;margin-inline:auto}
.bleed{width:100%}
.bleed .fig figcaption{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- logo strip ----
   Marks arrive in every shape and weight there is, so each sits in a fixed box
   and is contained rather than stretched. Grey by default, colour on hover:
   the strip reads as one row instead of a fruit salad. */
.logos{display:grid;grid-template-columns:repeat(var(--logo-cols,4),1fr);gap:18px;margin-top:30px}
.logos__i{background:var(--wh);border:1px solid var(--cmp);min-height:112px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 16px;
  transition:border-color .2s,box-shadow .2s}
.logos__i:hover{border-color:var(--go);box-shadow:0 2px 14px rgba(27,61,46,.07)}
.logos__i img{max-height:46px;width:auto;object-fit:contain;
  filter:grayscale(1) contrast(.92);opacity:.78;transition:filter .25s,opacity .25s}
.logos__i:hover img{filter:none;opacity:1}
.logos__n{font-size:12px;color:var(--mut);text-align:center;line-height:1.5}
[dir="ltr"] .logos__n{font-family:var(--head);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.logos__note{margin:18px 0 0;font-size:12.5px;color:var(--mut);text-align:center}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.logos{grid-template-columns:repeat(2,1fr)}.logos__i{min-height:92px}}

/* ---- standing notice ---- */
.note{background:var(--iv2);border-inline-start:4px solid var(--pr);padding:clamp(22px,2.6vw,34px)}
.note--plain{border-inline-start-color:var(--go)}
.note__h{font-size:clamp(16px,1.5vw,19px);color:var(--pr);margin:0 0 14px;line-height:1.5}
.note--plain .note__h{color:var(--g)}
[dir="ltr"] .note__h{font-family:var(--head);letter-spacing:.08em}
.note__lead{font-size:14.5px;line-height:1.85;margin:0 0 14px}
.note__list{margin:0;padding:0;list-style:none}
.note__list li{position:relative;padding-inline-start:22px;margin-bottom:10px;font-size:14px;line-height:1.85;color:var(--body)}
.note__list li:last-child{margin-bottom:0}
.note__list li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:9px;height:1.5px;background:var(--pr)}
.note--plain .note__list li::before{background:var(--go)}
.note__list b{color:var(--ch);font-weight:700}

/* ---- container type drawings ----
   The point of these is that a reader can tell a 40ft high cube from a flat
   rack without reading the row label, so the whole set is drawn to one scale
   and rendered at one width. */
.ctr{width:100%;max-width:196px;height:auto;display:block}
.tbl td.ctr-cell{width:206px;padding-block:8px;vertical-align:middle}
/* A row with a drawing in it should read across, so the figures sit on the
   same line as the picture rather than floating at the top of the cell. */
.tbl tr:has(.ctr-cell) td{vertical-align:middle}
.ctr-band{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 26px;margin-top:30px}
.ctr-band figure{margin:0;text-align:center}
.ctr-band figcaption{margin-top:6px;font-size:12.5px;color:var(--mut);line-height:1.5}
@media (max-width:900px){.ctr-band{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
  .ctr-band{grid-template-columns:repeat(2,1fr)}
  .tbl td.ctr-cell{width:120px}
  .ctr{max-width:110px}
}

/* ---- compact tariff table ----
   A five-column detention scale stretched across 1240px puts a metre of white
   space between the day range and its rate. It reads better boxed and centred. */
.tbl-scroll--compact{display:flex;justify-content:center}
.tbl--compact{width:auto;min-width:min(520px,100%);border:1px solid var(--cmp)}
.tbl--compact th,.tbl--compact td{padding:11px 26px}
.tbl--compact th:first-child,.tbl--compact td:first-child{text-align:start}
.tbl--compact th:not(:first-child),.tbl--compact td:not(:first-child){text-align:end}
@media (max-width:560px){.tbl--compact th,.tbl--compact td{padding:9px 12px}}

/* ---- article layout ----
   A blog post set to 78ch inside the same wrap had the same cut-off problem as
   the rich text. The measure stays readable; an aside fills the rest. */
.art{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,306px);gap:clamp(30px,4vw,66px);align-items:start}
.art__aside{position:sticky;top:calc(var(--hdr-h) + 26px);border-top:3px solid var(--go);padding-top:20px}
.art__aside h3{font-size:14px;margin:0 0 14px;color:var(--g)}
[dir="ltr"] .art__aside h3{font-family:var(--head);letter-spacing:.16em;font-size:13px}
.art__toc{margin:0 0 30px;padding:0;list-style:none;counter-reset:t}
.art__toc li{counter-increment:t;margin-bottom:9px;font-size:14px;line-height:1.65;padding-inline-start:26px;position:relative}
.art__toc li::before{content:counter(t,decimal-leading-zero);position:absolute;inset-inline-start:0;top:1px;
  font-size:12px;font-weight:700;color:var(--go)}
.art__toc a{color:var(--body);border-bottom:1px solid transparent}
.art__toc a:hover{color:var(--g);border-bottom-color:var(--go)}
.art__box{background:var(--iv2);padding:20px;margin-bottom:22px}
.art__box p{font-size:13.5px;line-height:1.8;margin:0 0 12px}
.art__box .btn{width:100%;justify-content:center;padding:11px 16px;font-size:13px}
.art .prose{max-width:none}
.art .prose>p:first-of-type{font-size:18px;line-height:1.85;color:var(--ch)}
[dir="ltr"] .art .prose>p:first-of-type{font-size:19px}
@media (max-width:900px){
  .art{grid-template-columns:1fr}
  .art__aside{position:static;order:-1}
  .art__toc{margin-bottom:16px}
}

/* ---- pull quote inside an article ---- */
.pull{margin:30px 0;padding:22px 26px;background:var(--g);color:var(--iv);border-inline-start:4px solid var(--go)}
.pull p{margin:0;font-size:17px;line-height:1.75;color:var(--ivm)}
[dir="ltr"] .pull p{font-family:var(--serif);font-size:20px;line-height:1.55}