/* arrowlancer.ma — site stylesheet. Layout concept: an editorial two-column page. Section labels sit in a narrow left column,
   content runs in the right column. Hairline rules separate sections. Orange is the brand
   mark, the primary button and one solid contact band. Nothing else is coloured. */
:root{
  --paper:#FFFFFF;
  --paper-2:#F6F3EE;
  --ink:#1B1714;
  --ink-2:#5B534C;
  --ink-3:#8A817A;
  --rule:#E3DDD5;
  --orange:#E07F31;
  --on-orange:#1B1714;
  --field:#FFFFFF;
  --display:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body:"Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --max:1200px;
  --gutter:clamp(16px, 4vw, 48px);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#15110E; --paper-2:#1D1712; --ink:#F2ECE4; --ink-2:#B3A89D; --ink-3:#7F756C;
    --rule:#332B25; --orange:#E8893B; --field:#FFFFFF;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px;
}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-0.01em}
p{margin:0}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.link{border-bottom:1px solid var(--orange); padding-bottom:1px; transition:color .15s}
.link:hover{color:var(--orange)}
.mark{width:28px; height:28px; fill:var(--orange); display:block}

/* header */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:24px}
.nav{display:flex; align-items:center; gap:28px; font-size:15px; font-weight:500}
.nav a:not(.link):hover{color:var(--orange)}
.nav .lang{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2)}
@media (max-width:820px){ .nav .hide-m{display:none} }

/* hero */
.hero{padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,96px)}
.hero .grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,3fr); gap:48px; align-items:end}
.hero h1{font-size:clamp(44px, 7.2vw, 96px); line-height:.98; margin-top:20px; max-width:14ch}
.hero .lede{font-size:clamp(18px,1.6vw,22px); line-height:1.5; color:var(--ink-2); max-width:56ch; margin-top:32px}
.cta{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; margin-top:40px}
.btn{display:inline-block; background:var(--orange); color:var(--on-orange); font-weight:600; font-size:16px;
  padding:14px 24px; border:1px solid var(--orange); transition:background .15s, color .15s}
.btn:hover{background:transparent; color:var(--ink)}
.facts{display:grid; gap:14px; border-top:1px solid var(--rule); padding-top:18px; font-size:15px}
.facts div{display:grid; grid-template-columns:96px 1fr; gap:12px}
.facts dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-top:3px}
.facts dd{margin:0; color:var(--ink-2)}
@media (max-width:820px){ .hero .grid{grid-template-columns:1fr} .facts{margin-top:8px} }

/* sections */
.section{border-top:1px solid var(--rule); padding-block:clamp(48px,7vw,104px)}
.section .grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:40px clamp(32px,6vw,96px)}
.section .label{position:sticky; top:24px; align-self:start}
.section .label .eyebrow{display:block; margin-bottom:14px}
.section h2{font-size:clamp(30px,3.4vw,44px); line-height:1.08}
.section .intro{font-size:19px; color:var(--ink-2); margin-top:18px; max-width:40ch}
@media (max-width:820px){ .section .grid{grid-template-columns:1fr} .section .label{position:static} }

/* lists of items with rules */
.items{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,56px)}
.item{border-top:1px solid var(--rule); padding:26px 0 30px}
.item h3{font-size:24px; line-height:1.2; margin-bottom:10px}
.item p{color:var(--ink-2); max-width:44ch}
@media (max-width:640px){ .items{grid-template-columns:1fr} }

/* how we work */
.pull{font-family:var(--display); font-size:clamp(24px,2.6vw,34px); line-height:1.3; max-width:30ch; font-weight:300}
.pull em{font-style:italic; color:var(--orange)}

/* clients */
.names{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.names > *{font-family:var(--display); font-size:clamp(22px,2.4vw,30px); padding:22px 28px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); flex:1 1 auto}
.names a:hover{color:var(--orange)}
.names .ext{font-family:var(--mono); font-size:11px; color:var(--ink-3); vertical-align:top; margin-left:6px}
.note{color:var(--ink-2); margin-top:22px; max-width:60ch}

/* platforms */
.platform{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start}
.shot{border:1px solid var(--rule); display:block; max-width:100%; height:auto}
.platform h3{font-size:30px; line-height:1.15}
.platform .flag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:12px}
.platform p{color:var(--ink-2); margin-top:14px; max-width:44ch}
.platform .link{display:inline-block; margin-top:22px}
@media (max-width:820px){ .platform{grid-template-columns:1fr} }

/* tech line */
.tech{font-family:var(--mono); font-size:15px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:10px 0}
.tech span:not(:last-child)::after{content:"·"; margin-inline:14px; color:var(--ink-3)}

/* industries */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:0 32px; margin:0; padding:0; list-style:none}
.sectors li{font-family:var(--display); font-size:26px; border-top:1px solid var(--rule); padding:18px 0}
.marks{display:grid; gap:10px; margin-top:36px; color:var(--ink-2); font-size:16px}
.marks span::before{content:""; display:inline-block; width:10px; height:10px; background:var(--orange); margin-right:12px; vertical-align:baseline}
@media (max-width:640px){ .sectors{grid-template-columns:1fr 1fr} }

/* about */
.about p.big{font-size:clamp(20px,2vw,26px); font-family:var(--display); line-height:1.4; max-width:36ch}
.about .pair{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px}
.about h4{font-family:var(--body); font-weight:600; font-size:17px; margin-bottom:6px}
.about .pair p{color:var(--ink-2)}
@media (max-width:640px){ .about .pair{grid-template-columns:1fr} }

/* contact band */
.contact{background:var(--orange); color:var(--on-orange)}
.contact .wrap{padding-block:clamp(56px,7vw,96px)}
.contact .grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:48px clamp(40px,7vw,120px)}
.contact h2{font-size:clamp(36px,4.4vw,60px); line-height:1.02}
.contact .intro{font-size:19px; margin-top:20px; max-width:34ch; opacity:.85}
.contact .meta{margin-top:40px; display:grid; gap:22px}
.contact .meta .eyebrow{color:var(--on-orange); opacity:.7; display:block; margin-bottom:4px}
.contact .meta a{font-family:var(--display); font-size:26px; border-bottom:1px solid var(--on-orange)}
.form{display:grid; gap:18px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{display:grid; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.form input,.form select,.form textarea{
  font:inherit; font-family:var(--body); font-size:16px; color:#1B1714; background:var(--field);
  border:1px solid #1B1714; padding:12px 14px; width:100%; border-radius:0; appearance:none; -webkit-appearance:none;
}
.form select{background-image:linear-gradient(45deg,transparent 50%,#1B1714 50%),linear-gradient(135deg,#1B1714 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.form textarea{min-height:140px; resize:vertical}
.form button{font:inherit; font-weight:600; font-size:16px; background:#1B1714; color:#F2ECE4; border:1px solid #1B1714; padding:14px 26px; cursor:pointer; justify-self:start; transition:background .15s,color .15s}
.form button:hover{background:transparent; color:#1B1714}
.form .ok{font-size:15px; opacity:.85}
@media (max-width:820px){ .contact .grid{grid-template-columns:1fr} }
@media (max-width:520px){ .form .row{grid-template-columns:1fr} }

/* footer */
.foot{border-top:1px solid var(--rule)}
.foot .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding-block:28px; font-size:14px; color:var(--ink-2)}
.foot .brand{font-size:18px}
.foot .brand .mark{width:20px; height:20px}
.foot nav{display:flex; gap:24px}
.foot nav a:hover{color:var(--orange)}

/* form status */
.form .status{font-size:15px; margin:0}
.form .status.ok{opacity:.85}
.form .status.err{background:#1B1714; color:#F2ECE4; padding:10px 14px}

/* legal pages */
.legal{max-width:760px; margin:0 auto; padding:clamp(48px,7vw,96px) var(--gutter)}
.legal h1{font-size:clamp(36px,5vw,56px); line-height:1.05}
.legal .updated{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:18px}
.legal section{border-top:1px solid var(--rule); margin-top:40px; padding-top:28px}
.legal h2{font-size:26px; line-height:1.2; margin-bottom:12px}
.legal p,.legal li{color:var(--ink-2)}
.legal p + p,.legal p + ul,.legal ul + p{margin-top:12px}
.legal ul{padding-left:22px; margin:0; display:grid; gap:6px}
.legal strong{color:var(--ink); font-weight:600}
.legal a{border-bottom:1px solid var(--orange)}
.legal a:hover{color:var(--orange)}

/* 404 */
.nf{padding-block:clamp(80px,14vw,180px)}
.nf h1{font-size:clamp(36px,5vw,64px); margin-top:16px; max-width:16ch}
.nf p{color:var(--ink-2); font-size:19px; margin-top:16px}
.nf .links{display:flex; gap:28px; flex-wrap:wrap; margin-top:32px}

/* careers */
.careers{max-width:760px; margin:0 auto; padding:clamp(48px,7vw,96px) var(--gutter)}
.careers .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.careers h1{font-size:clamp(36px,5vw,56px); line-height:1.05; margin-top:14px; max-width:18ch}
.careers .intro{color:var(--ink-2); font-size:19px; margin-top:18px; max-width:56ch}
.careers .roles-h{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:400; margin-top:56px}
.job{border-top:1px solid var(--rule); margin-top:18px; padding-top:28px}
.job + .job{margin-top:40px}
.job h2{font-size:30px; line-height:1.15}
.job .meta{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin-top:16px; font-size:15px}
.job .meta dt{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-top:3px}
.job .meta dd{margin:0; color:var(--ink-2)}
.job .lead{margin-top:20px; font-size:18px; color:var(--ink)}
.job h3{font-size:16px; font-weight:600; margin-top:24px; margin-bottom:8px}
.job ul{padding-left:22px; margin:0; display:grid; gap:6px}
.job li{color:var(--ink-2)}
.job .btn{margin-top:26px}
.careers .how{border-top:1px solid var(--rule); margin-top:56px; padding-top:28px}
.careers .how h2{font-size:26px; line-height:1.2; margin-bottom:12px}
.careers .how p{color:var(--ink-2)}
.careers .how a{border-bottom:1px solid var(--orange)}
.careers .how a:hover{color:var(--orange)}
@media (max-width:520px){ .job .meta{grid-template-columns:1fr; gap:2px} .job .meta dd{margin-bottom:8px} }