/* Contact (sitemap 09): the line beside the form on Paper, then the office on Marine, as Careers' Where we work.
   No photo: the client's new photos are not in yet and every current photo is already used once (asset register). */
.ct .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center}
.ct .hx1{max-width:8em}
.ct .lead{margin-top:clamp(16px,2.6svh,24px);max-width:24em}
.ct .resp{margin-top:clamp(10px,1.6svh,14px);font-weight:500;color:var(--ink);font-size:var(--lead);line-height:1.55}
.ct .pre{margin-top:clamp(18px,3svh,28px);color:var(--mid);font-size:15.5px}
.ct .mail{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:13px;color:var(--mid);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.ct .mail:hover{color:var(--marine);border-color:currentColor}

/* errors use Violet, the Signal Rule's one flagged thing in a view, never a new red */
/* the form: ruled fields under a 2px Ink rule, as the lists on the other pages */
.fm{border-top:2px solid var(--ink)}
.fm .row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,40px)}
/* a field's resting rule is Mid Grey, so the field reads at 3:1 (WCAG 1.4.11). Plain dividers keep Border Grey */
.fd{position:relative;display:flex;flex-direction:column;padding:clamp(10px,1.8svh,16px) 0 clamp(8px,1.4svh,12px);border-bottom:1px solid var(--mid);transition:border-color .2s}
.fd.file{border-bottom-color:var(--line)}
.fd label,.fd .lb{font-weight:600;font-size:15.5px;color:var(--ink)}
.fd label small,.fd .lb small{font-weight:400;color:var(--mid);margin-left:6px}
.fd input,.fd textarea{width:100%;margin-top:6px;padding:6px 0;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);border-radius:0}
.fd textarea{resize:vertical;min-height:calc(3 * 1.5em + 12px);line-height:1.5}
/* desktop: two lines to start with, so the form and its errors fit one screen at 1880x790 (it grows as people type) */
@media (min-width:901px){.fd textarea{min-height:calc(2 * 1.5em + 12px)}}
.fd input::placeholder,.fd textarea::placeholder{color:var(--mid)}
.fd input:focus,.fd textarea:focus{outline:none}
.fd:focus-within{border-bottom-color:var(--ink)}
.fd:has(:focus-visible){box-shadow:0 2px 0 0 var(--violet)}
.fd .er{display:none;align-items:flex-start;gap:8px;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.fd .er::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--violet)}
.fd.bad{border-bottom:2px solid var(--violet);margin-bottom:-1px}
.fd.bad .er{display:flex}
/* the RFP: a light pill that opens the file picker, the chosen file named beside it */
.fd.file{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fd.file input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}
.fd.file .pick{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:600;font-size:14.5px;cursor:pointer;transition:background .2s,border-color .2s}
.fd.file .pick:hover{background:var(--pale);border-color:var(--mid)}
.fd.file input:focus-visible+.pick{outline:2px solid var(--violet);outline-offset:3px}
.fd.file .pick small{font-weight:400;color:var(--mid)}
.fd.file .fn{font-family:var(--mono);font-size:12.5px;color:var(--mid)}
/* the honeypot: out of sight and out of the tab order, for bots only */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.fm .go{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px 24px;margin-top:clamp(18px,3svh,28px)}
/* the phone header is sticky: a field brought into view keeps its label clear of it */
.fd,.topic{scroll-margin-top:calc(var(--head-h) + 16px)}
.fm input,.fm textarea{scroll-margin-top:calc(var(--head-h) + 52px)}
/* What is this about: one choice, as pills; Career Inquiries leaves for Careers */
.topic{margin:0;padding:clamp(10px,1.8svh,16px) 0 clamp(12px,2svh,16px);border:0;border-bottom:1px solid var(--line);min-width:0}
.topic legend{float:left;width:100%;padding:0;font-weight:600;font-size:15.5px;color:var(--ink)}
.topic .pills{clear:both;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.pl{position:relative;display:inline-flex;cursor:pointer}
.pl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pl span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--mid);background:var(--paper);font-weight:500;font-size:14.5px;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.pl:hover span{background:var(--pale)}
.pl input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pl input:focus-visible+span,.pl.go-c:focus-visible span{outline:2px solid var(--violet);outline-offset:3px}
.pl.go-c:focus-visible{outline:none}
.pl.go-c span{border-color:var(--line);color:var(--mid)}
.pl.go-c:hover span{color:var(--ink)}
.pl svg{width:14px;height:14px;fill:currentColor}
.topic .er{display:none;align-items:flex-start;gap:8px;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.topic .er::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--violet)}
.topic.bad{border-bottom:2px solid var(--violet);margin-bottom:-1px}
.topic.bad .er{display:flex}
.fm .sum{display:none;align-items:flex-start;gap:8px;margin-top:clamp(14px,2.4svh,20px);color:var(--ink);font-size:15.5px;line-height:1.5}
.fm .sum::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--violet)}
.fm .sum.on{display:flex}
/* WordPress: the same form drawn by Contact Form 7, its markup mapped onto the styles above (23-Oct-26) */
.fd .wpcf7-form-control-wrap,.fd .wpcf7-form-control-wrap>*{display:block}
.topic .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px}
.topic .wpcf7-list-item{margin:0}
.topic .wpcf7-list-item label{position:relative;display:inline-flex;cursor:pointer}
.topic .wpcf7-list-item input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.topic .wpcf7-list-item-label{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--mid);background:var(--paper);font-weight:500;font-size:14.5px;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.topic .wpcf7-list-item label:hover .wpcf7-list-item-label{background:var(--pale)}
.topic .wpcf7-list-item input:checked+.wpcf7-list-item-label{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.topic .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--violet);outline-offset:3px}
.topic .pills .wpcf7-form-control-wrap,.topic .pills .wpcf7-radio{display:contents}
.topic .pills .wpcf7-not-valid-tip{order:9;flex-basis:100%}
.wpcf7-not-valid-tip{display:flex;align-items:flex-start;gap:8px;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.wpcf7-not-valid-tip::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--violet)}
.fd:has(.wpcf7-not-valid),.topic:has(.wpcf7-not-valid){border-bottom:2px solid var(--violet);margin-bottom:-1px}
.fd.file:has(input:focus-visible) .pick{outline:2px solid var(--violet);outline-offset:3px}
.fm .wpcf7-response-output{margin:clamp(14px,2.4svh,20px) 0 0!important;padding:0!important;border:0!important;color:var(--ink);font-size:15.5px;line-height:1.5}
.fm.sent .wpcf7-response-output,.fm .wpcf7-response-output:empty{display:none}
.fm .wpcf7-spinner{margin:0 0 0 12px}
@media (max-width:900px){.topic .wpcf7-list-item-label{height:44px}}

/* the success state: the form gives way to one calm confirmation */
.ok{display:none;border-top:2px solid var(--ink);padding-top:clamp(20px,3.6svh,32px)}
.ok p{margin-top:12px;color:var(--mid);font-size:var(--lead);line-height:1.55;max-width:32em}
.ok .tbc{margin-top:16px}
.ok .link{display:inline-block;margin-top:20px}
.sent .fm{display:none}
.sent .ok{display:block}

/* Book a call (client 21-Oct-26, "similar to the one available on our current website"): the live page's two Calendly
   calendars, shown one at a time. Our side holds the words: the meeting facts and who you talk to, as pills like the
   form's topic. Calendly's own header is hidden, so the frame is only the calendar, on a white card under an Ink rule */
/* the frame stops at 560px: below about 600px Calendly drops its own bordered card, so ours is the only frame */
.bk .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(28px,5vw,96px);align-items:center}
.bk .lead{margin-top:clamp(12px,2svh,18px);max-width:22em}
.bk .facts{max-width:30em;margin:clamp(18px,3svh,28px) 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.bk .facts li{display:flex;gap:16px;padding:clamp(9px,1.6svh,13px) 0;border-bottom:1px solid var(--line);font-size:15.5px}
.bk .facts span{flex:none;width:7.5em;font-family:var(--mono);font-size:12.5px;color:var(--mid);padding-top:3px}
.bk .who{margin-top:clamp(18px,3svh,28px)}
.bk .who .lb{font-weight:600;font-size:15.5px}
.bk .who .pills{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.bk .who button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--mid);background:var(--paper);font-weight:500;font-size:14.5px;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.bk .who button:hover{background:#fff}
.bk .who button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bk .who button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.bk .cal{position:relative;border-top:2px solid var(--ink);background:#fff;border-radius:0 0 14px 14px;overflow:hidden}
/* 606px to start (one month, measured), then the frame follows Calendly's own page height (its calendly.page_height message), so no grey
   band shows under a short month and a long one never scrolls. A slimmer section padding keeps one screen at 1880x790 */
.bk{--sec-y:clamp(20px,3.6svh,48px)}
.bk .calendly-inline-widget{height:606px;transition:height .2s}
.bk .calendly-inline-widget[hidden]{display:none}

/* our office: Careers' places band (heading, then a full width ruled row), one place */
.of .head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px 40px}
.of .clk{display:flex;align-items:end;gap:clamp(18px,2.4vw,36px);margin:0}
.of .clk div{display:grid;gap:4px}
.of .clk small{font-family:var(--mono);font-size:12.5px;color:#D1E1EA}
.of .clk b{font-weight:700;font-size:clamp(24px,min(2.4vw,4.4svh),38px);letter-spacing:-.03em;line-height:1;color:var(--paper);font-feature-settings:"tnum"}
.of .clk p{max-width:11em;color:#D1E1EA;font-size:14px;line-height:1.4}
/* Where we work (client 26-Oct-26): every site as a card beside a large photo of its building, with a dotted map of Egypt and the UAE.
   The sites take turns every 6s while the band is on screen; a hover, a tap or the keyboard picks one and holds it, the pause control stops the turns */
.sw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3.4vw,64px);align-items:stretch;margin-top:clamp(26px,5svh,52px)}
.sw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:2px solid var(--paper)}
.sw-list li{border-bottom:1px solid rgba(247,245,240,.22)}
.sw-list button{position:relative;display:grid;gap:6px;width:100%;padding:clamp(14px,2.4svh,22px) 4px clamp(14px,2.4svh,22px) 18px;background:none;border:0;color:var(--paper);text-align:left;font:inherit;cursor:pointer;transition:background .35s}
.sw-list button::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:2px;background:var(--violet-dark);transform:scaleY(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sw-list button:hover,.sw-list button:focus-visible{background:rgba(247,245,240,.06)}
.sw-list button[aria-pressed="true"]::before{transform:scaleY(1)}
.sw-list small{font-family:var(--mono);font-size:12.5px;color:#D1E1EA;letter-spacing:.02em}
.sw-list b{font-weight:700;font-size:clamp(21px,min(2vw,3.8svh),30px);letter-spacing:-.025em;line-height:1.1;opacity:.62;transition:opacity .35s}
.sw-list button[aria-pressed="true"] b,.sw-list button:hover b{opacity:1}
/* the chosen card's place line in Paper: the lighter card fill (phone) took #D1E1EA under 4.5:1 (final check 27-Oct-26) */
.sw-list button[aria-pressed="true"] small{color:var(--paper)}
.sw-list i{position:absolute;left:18px;right:4px;bottom:0;height:2px;background:var(--violet-dark);transform:scaleX(0);transform-origin:0 50%}
.sw.run .sw-list button[aria-pressed="true"] i{animation:swbar 6s linear forwards}
@keyframes swbar{to{transform:scaleX(1)}}
.sw-stage{position:relative;min-height:clamp(340px,56svh,560px);border-radius:var(--r);overflow:hidden;background:var(--ink);isolation:isolate}
.sw-ph{position:absolute;inset:0;margin:0}
.sw-ph>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(4%) scale(1.04);transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.sw-ph>.on{opacity:1;transform:none}

.sw-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(16,42,67,.9) 0%,rgba(16,42,67,.35) 38%,rgba(16,42,67,0) 60%)}
.sw-cap{position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);bottom:clamp(18px,3svh,30px);z-index:2;display:grid;gap:6px;color:var(--paper);padding-left:48px}
.sw-cap small{font-family:var(--mono);font-size:12.5px;color:#D1E1EA}
.sw-cap b{font-weight:700;font-size:clamp(26px,min(3vw,5.4svh),46px);letter-spacing:-.035em;line-height:1}
.sw-cap span{font-size:15.5px;color:#D1E1EA;max-width:34em}
/* the map lies on the photo like the Home map: no card, an Ink wash over the top of the photo keeps it clear */
.sw-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(195deg,rgba(16,42,67,.82) 0%,rgba(16,42,67,.5) 34%,rgba(16,42,67,0) 62%)}
.sw-map{position:absolute;top:clamp(16px,2.4vw,30px);right:clamp(12px,1.6vw,24px);z-index:2;width:min(58%,520px)}
.sw-map svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 3px rgba(16,42,67,.7))}
.sw-map .land{fill:none;stroke:rgba(247,245,240,.28);stroke-linecap:round}
.sw-map .mk{fill:none;stroke:rgba(255,255,255,.82);stroke-linecap:round}
.sw-map .pin{fill:var(--paper);transition:fill .4s}
.sw-map .pin.on{fill:var(--violet-dark)}
.sw-map .ring{fill:none;stroke:var(--violet-dark);stroke-width:2.5;opacity:0}
.sw-map .ring.on{animation:swring 1.8s ease-out infinite}
@keyframes swring{0%{opacity:.9;r:9px}100%{opacity:0;r:30px}}
.sw-map .lab{font-family:var(--mono);font-size:26px;fill:var(--paper);paint-order:stroke;stroke:rgba(16,42,67,.95);stroke-width:5px;opacity:0;transition:opacity .4s}
.sw-map .lab.on{opacity:1}
.sw-map .trip{fill:none;stroke:var(--paper);stroke-width:2.5;stroke-linecap:round;opacity:.85}
.sw-ctl{position:absolute;left:clamp(18px,2vw,30px);bottom:clamp(20px,3svh,32px);z-index:3}
.sw-ctl svg{width:12px;height:12px;fill:currentColor}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .sw-ph>*{transition:none;transform:none}html:not(.motion-on) .sw-map .ring.on{animation:none;opacity:.9}}
@media (max-width:900px){
  .sw{grid-template-columns:1fr;gap:18px}
  .sw-list{order:2;flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:4px;scroll-snap-type:x mandatory}
  .sw-list li{flex:none;border:0;scroll-snap-align:start}
  .sw-list button{padding:12px 16px;border:1px solid rgba(247,245,240,.28);border-radius:12px}
  .sw-list button::before{display:none}
  .sw-list button[aria-pressed="true"]{background:rgba(247,245,240,.1);border-color:var(--violet-dark)}
  .sw-list i{left:16px;right:16px}
  .sw-stage{min-height:0;aspect-ratio:4/5}
  .sw-map{width:80%}
  .sw-cap b{font-size:28px}
}


@media (max-width:900px){
  .ct .wrap{grid-template-columns:1fr;gap:28px}
  .fm .row{grid-template-columns:1fr}
  .pl span{height:44px}
  .bk .wrap{grid-template-columns:1fr}
  .bk .who button{height:44px}
  .bk .calendly-inline-widget{height:606px}
}