@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/plex-arabic-1.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/plex-arabic-2.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/plex-arabic-3.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/plex-arabic-4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/plex-arabic-5.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/plex-arabic-6.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#ffffff; --fg:#111827; --muted:#5b6472; --line:#e3e7ec;
  --accent:#1F4E5F; --accent-soft:#f1f6f7; --card:#ffffff;
  --max:1140px;
  --hero-bg:#123742; --hero-fg:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1417; --fg:#e8edf0; --muted:#9aa6b0; --line:#232c32;
    --accent:#7fc4d4; --accent-soft:#162126; --card:#141b1f;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1417; --fg:#e8edf0; --muted:#9aa6b0; --line:#232c32;
  --accent:#7fc4d4; --accent-soft:#162126; --card:#141b1f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.65; font-size:16.5px;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
a{color:inherit}
h1,h2,h3{line-height:1.25; margin:0}
.eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:14px;
}
/* header */
header{border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:20}
.bar{display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px}
.brand{font-weight:700; letter-spacing:-.01em; font-size:17px; text-decoration:none}
.brand span{color:var(--accent)}
nav{display:flex; align-items:center; gap:20px}
nav a{font-size:14px; color:var(--muted); text-decoration:none}
nav a:hover{color:var(--fg)}
.langbtn{
  border:1px solid var(--line); background:transparent; color:var(--fg);
  border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.langbtn:hover{border-color:var(--accent); color:var(--accent)}
@media(max-width:620px){ nav a.hide-sm{display:none} }
/* hero */
.hero{padding:92px 0 84px; background:var(--hero-bg); color:var(--hero-fg); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center}
.hero-art{width:100%; height:auto; max-width:560px; margin-inline-start:auto; display:block}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .hero-art{max-width:320px; margin:0 auto}
}
@media(max-width:560px){ .hero-art{display:none} }
/* the hero drawing cycles through six machines; it enters where the text begins
   and leaves where it ends, so the motion follows the reading direction */
.hero-art .hs{opacity:0; animation:heroCycle 25.2s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--i) * 4.2s)}
@keyframes heroCycle{
  0%{opacity:0; transform:translateX(-34px)}
  3.8%{opacity:1; transform:translateX(0)}
  12.8%{opacity:1; transform:translateX(0)}
  16.6%{opacity:0; transform:translateX(34px)}
  100%{opacity:0; transform:translateX(34px)}
}
html[dir="rtl"] .hero-art .hs{animation-name:heroCycleRTL}
@keyframes heroCycleRTL{
  0%{opacity:0; transform:translateX(34px)}
  3.8%{opacity:1; transform:translateX(0)}
  12.8%{opacity:1; transform:translateX(0)}
  16.6%{opacity:0; transform:translateX(-34px)}
  100%{opacity:0; transform:translateX(-34px)}
}
/* notes: article cards, and the reading view that replaces the page */
.notes-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:32px}
.note-card{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--card);
  cursor:pointer; text-align:start; width:100%; font:inherit; color:inherit; display:block;
  transition:border-color .18s ease, transform .18s ease}
.note-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.note-card h3{margin:0 0 10px; font-size:19px; line-height:1.35}
.note-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}
.note-card .more{display:inline-block; margin-top:16px; font-size:14px; font-weight:600; color:var(--accent)}
#note-view{padding:56px 0 72px}
    .note{scroll-margin-top:92px}
.note-back{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:14px;
  font-weight:600; color:var(--accent); margin-bottom:26px}
.note-back:hover{text-decoration:underline}
.note-body{max-width:720px}
.note-body h2{margin:0 0 10px}
.note-body h3{margin:34px 0 12px; font-size:19.5px; line-height:1.4}
.note-body p{margin:0 0 15px; line-height:1.75}
.note-body .note-lead{color:var(--muted); font-size:17px; line-height:1.75; margin:0 0 30px}
.note-body ol{padding-inline-start:24px; margin:0}
.note-body ol li{margin-bottom:18px; line-height:1.68}
.note-body ol li strong{display:block; margin-bottom:4px}
.note-body .note-end{margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted); line-height:1.75}
body.reading main > *:not(#note-view):not(#notes-view){display:none}
#notes-view{padding:56px 0 72px}
#notes-view .notes-grid{margin-top:28px}
@media (prefers-reduced-motion: reduce){
  /* no sliding, but the six drawings still cycle - a single frozen image hid five of them */
  .hero-art .hs,html[dir="rtl"] .hero-art .hs{animation-name:heroFade}
}
@keyframes heroFade{
  0%{opacity:0} 3.8%{opacity:1} 12.8%{opacity:1} 16.6%{opacity:0} 100%{opacity:0}
}
.hero .eyebrow{color:#8fd0de}
.hero p.lead{color:rgba(255,255,255,.82)}
.hero .cta{background:#fff; color:var(--hero-bg) !important}
.hero .cta:hover{background:#e9f4f6}
.hero .wa{background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.45)}
.hero .wa:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.hero h1{font-size:clamp(30px,5.2vw,52px); letter-spacing:-.022em; max-width:26ch}
.hero p.lead{font-size:clamp(16px,2.2vw,19.5px); max-width:70ch; margin:22px 0 0}
.cta{display:inline-block; margin-top:32px; margin-inline-end:12px; background:var(--accent); color:#fff;
  padding:14px 28px; border-radius:8px; text-decoration:none; font-weight:600; font-size:15.5px}
.wa{display:inline-block; margin-top:32px; padding:14px 26px; border-radius:8px;
  text-decoration:none; font-weight:600; font-size:15.5px; border:1px solid var(--line); color:var(--fg)}
.wa svg{vertical-align:-3px; margin-inline-end:8px}
:root[data-theme="dark"] .cta, :root:not([data-theme="light"]) .cta{color:#0f1417}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cta{color:#fff} }
/* sections */
section{padding:72px 0; border-bottom:1px solid var(--line)}
section h2{font-size:clamp(22px,3.3vw,31px); letter-spacing:-.015em; max-width:34ch}
.sub{color:var(--muted); margin-top:14px; max-width:78ch; font-size:16.5px}
.grid{display:grid; gap:18px; margin-top:34px}
.g4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr} }
@media(max-width:520px){ .g4{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--card)}
.card h3{font-size:16px; margin-bottom:8px}
.card p{margin:0; color:var(--muted); font-size:15px}
.num{font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.1em; display:block; margin-bottom:10px}
/* steps */
ol.steps{margin:34px 0 0; padding:0; list-style:none; counter-reset:s}
ol.steps li{
  counter-increment:s; position:relative; padding:24px 0 24px 78px; border-top:1px solid var(--line);
}
ol.steps li:last-child{border-bottom:1px solid var(--line)}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:16px;
  color:var(--accent); font-weight:700; font-size:40px; line-height:1;
  font-variant-numeric:tabular-nums; opacity:.9;
}
ol.steps strong{display:block; font-size:17px; margin-bottom:3px}
ol.steps span{color:var(--muted); font-size:15.5px}
/* divisions */
.div-row{display:flex; align-items:baseline; gap:16px; padding:20px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.div-row:last-child{border-bottom:1px solid var(--line)}
.div-lot{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent); min-width:58px}
.div-name{font-weight:600; min-width:180px}
.div-desc{color:var(--muted); font-size:14.5px; flex:1; min-width:220px}
.tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.tag.live{background:var(--accent-soft); color:var(--accent); border-color:transparent}
/* contact */
.contact-box{margin-top:30px; border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--card)}
.contact-box a.mail{font-size:clamp(17px,3vw,22px); font-weight:600; color:var(--accent); text-decoration:none; word-break:break-all}
/* form */
form.enq{margin-top:26px; display:grid; gap:14px; max-width:620px}
form.enq label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px}
form.enq input, form.enq textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:15.5px; color:var(--fg);
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
}
form.enq textarea{min-height:110px; resize:vertical}
form.enq input:focus, form.enq textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
form.enq button{
  justify-self:start; background:var(--accent); color:#fff; border:0; cursor:pointer;
  padding:14px 30px; border-radius:8px; font:inherit; font-weight:600; font-size:15.5px;
}
:root[data-theme="dark"] form.enq button, :root:not([data-theme="light"]) form.enq button{color:#0f1417}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) form.enq button{color:#fff} }
form.enq button:disabled{opacity:.55; cursor:default}
.enq-note{font-size:14px; color:var(--muted); margin:10px 0 0}
.enq-msg{margin-top:14px; font-size:15px; font-weight:600; display:none}
.enq-msg.ok{display:block; color:#0f7b52}
.enq-msg.err{display:block; color:#c0392b}
form.enq input.hp, .hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
footer{padding:30px 0 50px; color:var(--muted); font-size:13px}
footer p{margin:4px 0}
/* arabic */
[dir="rtl"]{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
[dir="rtl"] ol.steps li{padding:24px 78px 24px 0}
[dir="rtl"] ol.steps li::before{left:auto; right:0}
[dir="rtl"] .hero h1{max-width:22ch}

.brand{display:inline-flex; align-items:center; line-height:0}
.brand svg.logo{height:38px; width:auto; display:block; color:var(--fg)}
@media(max-width:560px){ .brand svg.logo{height:31px} }
ul.lead-points{list-style:none; padding:0; margin:18px 0 0; max-width:62ch}
ul.lead-points li{position:relative; padding-inline-start:24px; margin-bottom:11px;
  font-size:clamp(15.5px,2vw,17.5px); line-height:1.6; color:rgba(255,255,255,.82)}
ul.lead-points li::before{content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:8px; height:8px; border-radius:50%; background:#8fd0de}
.ico{width:26px; height:26px; color:var(--accent); display:block; margin-bottom:12px}
.rigs{margin-top:44px; border-top:1px solid var(--line); padding-top:32px}
.rigs .rigs-lead{color:var(--muted); font-size:15.5px; margin:0 0 26px}
.rigs .rigs-group{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.rigs .rigs-group.second{margin-top:38px; padding-top:30px; border-top:1px solid var(--line)}
.rigs .row{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px}
.rigs figure{margin:0; text-align:center}
.rigs svg.rig{width:100%; max-width:152px; height:auto; color:var(--accent); opacity:.9; display:block; margin:0 auto}
.rigs figcaption{margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.4}
/* centre a lone tile on the last row instead of leaving it stranded left */
/* nine drawings per group divide evenly into three columns; only the two-column
   phone layout can leave one stranded, and that one spans the row instead */
.rigs .row > figure:last-child:nth-child(3n+1){grid-column:2}
@media(max-width:560px){ .rigs .row{grid-template-columns:repeat(2,1fr); gap:26px 14px}
  .rigs .row > figure:last-child:nth-child(3n+1){grid-column:auto}
  .rigs .row > figure:last-child:nth-child(2n+1){grid-column:1 / -1} }
.person{display:grid; grid-template-columns:190px 1fr; gap:28px; align-items:center; margin-top:34px;
  padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--accent-soft)}
.person img{width:100%; height:auto; border-radius:12px; display:block}
.person h3{font-size:18px; margin:0 0 4px}
.person .role{font-size:14px; color:var(--accent); margin:0 0 12px; font-weight:500}
.person p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.65}
@media(max-width:700px){ .person{grid-template-columns:1fr; text-align:center}
  .person img{max-width:210px; margin:0 auto} }
svg.logo-foot{height:46px; width:auto; color:var(--muted); opacity:.8; display:block; margin-bottom:16px}

[lang-block]{display:none}
html[data-lang="en"] [lang-block="en"]{display:block}
html[data-lang="ar"] [lang-block="ar"]{display:block}
html[data-lang="ar"] #compliance{display:none}
html[data-lang="en"] li[lang-block="en"]{display:list-item}
html[data-lang="ar"] li[lang-block="ar"]{display:list-item}
html[data-lang="en"] span[lang-block="en"],html[data-lang="ar"] span[lang-block="ar"]{display:inline}

/* ---- design pass ---- */
/* hero: exactly one screen, never more */
.hero{padding:clamp(40px,6vh,72px) 0; min-height:calc(100svh - 65px); display:flex; align-items:center}
@supports not (height: 100svh){ .hero{min-height:calc(100vh - 65px)} }
.hero > .wrap{width:100%}
.hero h1{font-size:clamp(29px,4.5vw,46px); line-height:1.14; max-width:21ch}
.hero p.lead{font-size:clamp(15.5px,2vw,18.5px); max-width:52ch; margin:18px 0 0}
ul.lead-points{margin-top:15px}
ul.lead-points li{margin-bottom:9px}
.hero .cta,.hero .wa{margin-top:26px}
.hero-art{max-width:460px}
/* the hero fills exactly one screen; layout and type answer to width AND height */
.hero .wrap{grid-template-columns:1fr; gap:26px}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px}
}
/* a narrow window gets the full width and a bigger voice, not a squeezed column */
@media(max-width:899px){
  .hero{padding:clamp(30px,4.4vh,56px) 0}
  .hero h1{font-size:clamp(32px,6.2vw,48px); max-width:none}
  .hero p.lead{font-size:clamp(17px,2.6vw,19px); max-width:none}
  ul.lead-points{max-width:none}
  ul.lead-points li{font-size:clamp(16px,2.3vw,17.5px)}
  .hero-art{max-width:440px; max-height:clamp(118px,23vh,250px); margin:0 auto}
}
/* shorter windows step everything down together, never to a timid size */
@media(max-height:780px){
  .hero{padding:clamp(22px,3.2vh,44px) 0}
  .hero h1{font-size:clamp(30px,5.5vw,43px)}
  .hero p.lead{font-size:clamp(16.8px,2.4vw,18px); margin-top:14px}
  ul.lead-points li{margin-bottom:9px; font-size:clamp(15.8px,2.2vw,16.5px)}
  .hero .cta,.hero .wa{margin-top:21px}
}
@media(max-height:700px){
  .hero h1{font-size:clamp(29px,5.1vw,39px)}
  .hero p.lead{font-size:clamp(16.4px,2.3vw,17.2px); margin-top:12px}
  ul.lead-points{margin-top:11px}
  ul.lead-points li{margin-bottom:8px; font-size:clamp(15.4px,2.1vw,16px)}
  .hero .cta,.hero .wa{margin-top:18px}
  .hero-art{max-width:470px}
}
@media(max-height:620px){
  .hero h1{font-size:clamp(28px,4.8vw,36px)}
  .hero p.lead{font-size:16px; margin-top:10px}
  ul.lead-points li{margin-bottom:6px; font-size:15.2px}
  .hero .cta,.hero .wa{margin-top:15px}
  .hero-art{max-width:400px}
}

/* bands instead of a flat scroll */
section{border-bottom:0}
#how,#contact{background:var(--accent-soft)}
#compliance{border-top:1px solid var(--line)}

/* headings read better on a shorter measure */
section h2{max-width:24ch; line-height:1.2}
.sub{max-width:58ch}

/* cards: fewer per row, more air, a real icon anchor */
.g4{grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px}
.card{border-radius:14px; padding:26px 24px; transition:border-color .18s ease, box-shadow .18s ease}
.card:hover{border-color:var(--accent); box-shadow:0 2px 16px rgba(18,55,66,.07)}
.card h3{font-size:16.5px; margin-bottom:9px}
.card p{font-size:15.2px}
.ico-wrap{width:44px; height:44px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
#how .ico-wrap,#contact .ico-wrap{background:var(--bg)}


/* the equipment set reads as one group */
.rigs{background:var(--accent-soft); border-radius:18px; padding:32px 30px 28px; border-top:0; margin-top:46px}
#how .rigs,#contact .rigs{background:var(--bg)}
.rigs .rigs-lead{margin-bottom:26px}
.rigs svg.rig{max-width:146px}

/* form sits on the tinted band, so the fields lift off it */
form.enq input, form.enq textarea{background:var(--card); border-radius:10px}
.contact-box{background:var(--card)}

/* footer */
footer{padding:44px 0 56px; border-top:1px solid var(--line)}
.foot-row{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap}
.foot-links{display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px}
.foot-links a{color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--accent)}
footer .legal{margin:22px 0 0; font-size:12.5px; opacity:.8}

/* ---- pages ---- */
[hidden]{display:none !important}
section[data-page]{scroll-margin-top:72px}
nav a.on{color:var(--accent); font-weight:600}
.subnav{display:none}
@media(max-width:620px){
  .subnav{display:flex; gap:22px; overflow-x:auto; padding:0 16px 12px; margin-top:-4px; scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap}
  .subnav a.on{color:var(--accent); font-weight:600}
}
.page-top{padding-top:56px}
.g3c{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .g3c{grid-template-columns:1fr} }
.more-link{display:inline-block; margin-top:26px; font-weight:600; color:var(--accent); text-decoration:none}
.more-link:hover{text-decoration:underline}
.cta-band{background:var(--hero-bg); color:#fff; border-radius:18px; padding:40px 36px; display:flex;
  gap:24px 40px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta-band h2{color:#fff; max-width:none}
.cta-band p{margin:10px 0 0; color:rgba(255,255,255,.82); max-width:56ch}
.cta-band .cta{margin-top:0; background:#fff; color:var(--hero-bg) !important; white-space:nowrap}
#home-cta{padding:56px 0}
.licence{margin-top:26px; padding:20px 22px; border-radius:12px; border:1px solid var(--line);
  border-inline-start:4px solid var(--accent); background:var(--card); font-size:15.2px; color:var(--muted)}
.licence strong{color:var(--fg)}
/* form */
form.enq{max-width:760px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:620px){ .f2{grid-template-columns:1fr} }
form.enq select{width:100%; padding:12px 14px; font:inherit; font-size:15.5px; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:10px}
form.enq select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
form.enq .opt{font-weight:400; color:var(--muted)}
.promise{display:flex; gap:12px; align-items:flex-start; margin-top:24px; max-width:760px; padding:16px 18px;
  border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:15px}
.promise svg{flex:none; color:var(--accent); margin-top:2px}
.privacy-line{font-size:13.5px; color:var(--muted); margin:2px 0 0}
.privacy-line a{color:var(--accent)}
/* legal pages */
.legal-body{max-width:760px}
.legal-body h3{font-size:18px; margin:30px 0 10px}
.legal-body p,.legal-body li{color:var(--muted); line-height:1.7}
.legal-body p{margin:0 0 12px}
.legal-body ul{padding-inline-start:22px; margin:0 0 12px}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:var(--fg)}
.legal-body dl{display:grid; grid-template-columns:max-content 1fr; gap:8px 24px; margin:22px 0 0}
.legal-body dt{font-weight:600}
.legal-body dd{margin:0; color:var(--muted)}
@media(max-width:560px){ .legal-body dl{grid-template-columns:1fr; gap:2px} .legal-body dd{margin-bottom:12px} }
.small{font-size:13.5px}
.note-body .ask{display:block; margin-top:8px; color:var(--fg)}
.note-body .ask b{color:var(--accent)}
.note-body .note-lead a{color:var(--accent)}
#what .g4 > .card:nth-child(4){grid-column:1 / -1}

/* ---- multi-page ---- */
a.note-card{text-decoration:none}
a.note-back{display:inline-block; text-decoration:none}
a.langbtn{text-decoration:none; display:inline-block}