/* ════════════════════════════════════════════════════════════════════
   AZQ STUDIO — "Maison" design system
   Bespoke for Abdulla Al Qahtani · United Arab Emirates
   Italiana display · pure monochrome · bright/dark · full-screen slides
   ════════════════════════════════════════════════════════════════════ */

:root{
  --serif:'Italiana', 'Didot', serif;
  --sans:'Manrope', 'Segoe UI', sans-serif;
  --arabic:'Amiri', 'Traditional Arabic', serif;
  --pad:clamp(20px, 5vw, 64px);
  --nav-h:86px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

html[data-theme="dark"]{
  --bg:#0c0b0a;
  --bg-2:#131211;
  --text:#f2eee5;
  --text-2:rgba(242,238,229,.6);
  --text-3:rgba(242,238,229,.38);
  --line:rgba(242,238,229,.18);
  --line-2:rgba(242,238,229,.09);
  --accent:#c3a35f;
  --veil:rgba(12,11,10,.55);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f5f3ec;
  --bg-2:#edeae1;
  --text:#161511;
  --text-2:rgba(22,21,17,.62);
  --text-3:rgba(22,21,17,.4);
  --line:rgba(22,21,17,.2);
  --line-2:rgba(22,21,17,.09);
  --accent:#9a7a35;
  --veil:rgba(245,243,236,.5);
  color-scheme:light;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  overflow-x:hidden;
  transition:background .5s, color .5s;
}
::selection{ background:var(--text); color:var(--bg); }
img{ max-width:100%; display:block; -webkit-user-drag:none; }
a{ color:inherit; }

/* content protection — text can't be selected or long-pressed;
   form fields stay usable so a contact form still works */
body{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:3000; background:var(--text); color:var(--bg); padding:10px 18px; font-size:13px; }
.skip-link:focus{ left:16px; top:16px; }

/* ── Fixed hairline frame around the viewport ───────────────────── */
.frame{
  position:fixed; inset:10px; z-index:1500; pointer-events:none;
  border:1px solid var(--line-2);
  transition:border-color .5s;
}
@media(max-width:720px){ .frame{ inset:7px; } }

/* ── Typography ─────────────────────────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.display .ghost{
  color:transparent;
  -webkit-text-stroke:1px var(--text);
}
.label{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--text-2); font-weight:400;
}
.label .ar{ letter-spacing:.06em; }
.ar{ font-family:var(--arabic); }
.accent-dot{ color:var(--accent); }

/* Bilingual slide heading */
.slide-head{
  display:flex; align-items:baseline; gap:20px; margin-bottom:clamp(20px,4vh,44px);
}
.slide-head .num{ font-family:var(--serif); font-size:15px; color:var(--accent); }
.slide-head h2{ font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(28px,4.4vw,54px); line-height:1; }
.slide-head .ar{ font-size:clamp(16px,2vw,22px); color:var(--text-3); margin-left:auto; }
.slide-head::after{ display:none; }

/* ── NAV — centred logo ─────────────────────────────────────────── */
.nav{
  /* not fixed — the nav scrolls away with the page */
  position:absolute; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  /* oval logo dead-centre; links + icons evenly spaced around it */
  display:grid; grid-template-columns:repeat(3,1fr) auto repeat(3,1fr); align-items:center;
  padding:0 var(--pad);
}
.nav-side{ display:contents; }
.nav-side li{ list-style:none; justify-self:center; }
.nav-side a{
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
  text-decoration:none; color:var(--text-2); font-weight:400;
  position:relative; padding:6px 0; transition:color .25s;
}
.nav-side a::after{
  content:''; position:absolute; left:50%; bottom:0; height:1px; width:0;
  background:var(--text); transition:width .3s var(--ease), left .3s var(--ease);
}
.nav-side a:hover, .nav-side a[aria-current="page"]{ color:var(--text); }
.nav-side a:hover::after, .nav-side a[aria-current="page"]::after{ width:100%; left:0; }

/* icon links between the text links */
.nav-ico a{ padding:8px; }
.nav-ico a::after{ display:none; }
.nav-ico svg{ width:19px; height:19px; display:block; stroke:currentColor; fill:none; stroke-width:1.4; }
.nav-ico a:hover{ color:var(--accent); }

/* studio logo mark */
.brand{
  display:flex; align-items:center; justify-content:center;
  height:clamp(36px,4.6vh,50px);
  margin:0 clamp(14px,2.5vw,40px);
  text-decoration:none;
  transition:opacity .3s, transform .45s var(--ease);
}
.brand:hover{ opacity:.75; transform:scale(1.05); }
.brand img{ height:160%; width:auto; max-width:min(200px,34vw); object-fit:contain; display:none; }

/* white logo on dark theme, black logo on bright theme */
html[data-theme="dark"]  .brand img[data-logo="white"]{ display:block; }
html[data-theme="light"] .brand img[data-logo="black"]{ display:block; }

/* burger (mobile) */
.burger{
  display:none; position:absolute; top:22px; left:22px; z-index:1300;
  width:44px; height:44px; background:none; border:1px solid var(--line);
  cursor:pointer; border-radius:50%;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .3s;
}
.burger span{ width:16px; height:1px; background:var(--text); transition:transform .35s var(--ease), opacity .25s; }
body.nav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:1200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
body.nav-open .mobile-menu{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--serif); font-size:clamp(30px,9vw,44px); text-transform:uppercase;
  letter-spacing:.08em; text-decoration:none; color:var(--text-2); padding:6px 0;
  transition:color .25s;
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"]{ color:var(--text); }
.mobile-menu .ar{ margin-top:20px; color:var(--accent); font-size:20px; }

@media(max-width:960px){
  .nav{ grid-template-columns:1fr; justify-items:center; }
  .nav-side{ display:none; }
  .burger{ display:flex; }
}

/* ── THEME TOGGLE — fixed, floats outside sections ──────────────── */
.theme-btn{
  position:fixed; right:22px; bottom:22px; z-index:1400;
  width:46px; height:46px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), border-color .3s, background .5s;
}
.theme-btn:hover{ transform:rotate(40deg) scale(1.06); border-color:var(--text-2); }
.theme-btn svg{ width:17px; height:17px; }
.theme-btn .sun{ display:none; }
html[data-theme="dark"] .theme-btn .sun{ display:block; }
html[data-theme="dark"] .theme-btn .moon{ display:none; }

/* ── SLIDE DOTS — fixed right-centre pagination ─────────────────── */
.dots{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:1100;
  display:flex; flex-direction:column; gap:14px;
}
.dots button{
  width:26px; height:26px; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.dots button i{
  width:5px; height:5px; border-radius:50%; background:var(--text-3);
  transition:all .35s var(--ease);
}
.dots button.on i{ background:var(--accent); transform:scale(1.7); }
@media(max-width:720px){ .dots{ right:12px; gap:10px; } }

/* ── SNAP CONTAINER & SLIDES ────────────────────────────────────── */
.snap{ position:relative; }

/* Sections flow naturally down the page. "cover" sections fill the
   viewport and centre their content (hero / title / contact); all
   others are natural-height sections with generous rhythm. */
.slide{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start;
}
.slide.cover{ min-height:100svh; align-items:center; }
.slide + .slide{ border-top:1px solid var(--line-2); }
.slide-inner{
  width:100%; max-width:1280px; margin:0 auto;
  padding:calc(var(--nav-h) + clamp(22px,5vh,54px)) var(--pad) clamp(48px,7vh,88px);
}

/* huge Arabic watermark */
.wm{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--arabic); line-height:1; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px var(--line);
  font-size:clamp(160px,30vw,420px);
  right:-4%; bottom:-10%;
  transition:-webkit-text-stroke-color .5s;
}
.slide-inner{ position:relative; z-index:1; }

/* hero info strip — five equal columns with equal gaps at the hero's foot */
.slide.cover.has-strip{ flex-direction:column; align-items:stretch; }
/* margin:auto centres the name block in the space between nav and strip */
.has-strip .slide-inner{ margin-top:auto; margin-bottom:auto; }
.hstrip{
  width:100%; z-index:2;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,3vw,44px);
  padding:clamp(18px,3.2vh,32px) var(--pad);
  border-top:1px solid var(--line-2);
}
.hstrip h3{
  font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text); margin-bottom:7px;
}
.hstrip p, .hstrip a{ font-size:10.5px; line-height:1.85; color:var(--text-2); text-decoration:none; }
.hstrip a:hover{ color:var(--accent); }
/* reference-image alignment: 1-2 left, 3 centred, 4-5 right */
.hstrip .ta-c{ text-align:center; }
.hstrip .ta-r{ text-align:right; }
@media(max-width:960px){
  .hstrip{ grid-template-columns:1fr 1fr; }
  .hstrip .ta-c, .hstrip .ta-r{ text-align:left; }
}
@media(max-width:520px){ .hstrip{ grid-template-columns:1fr; } }

/* skill icon cards (The Studio) — gold line-art icons */
.disc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:520px){ .disc-cards{ grid-template-columns:1fr 1fr; gap:10px; } }
.disc-card{
  border:1px solid var(--line-2); border-radius:3px; overflow:hidden;
  text-align:center;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.disc-card:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:0 18px 30px -22px rgba(0,0,0,.6); }
.disc-ico{
  aspect-ratio:1; background:#0a0908; /* matches the icons' black ground in both themes */
  display:flex; align-items:center; justify-content:center; position:relative;
}
.disc-ico img{ width:82%; height:82%; object-fit:contain; transition:transform .45s var(--ease); }
.disc-card:hover .disc-ico img{ transform:scale(1.07) rotate(-1.5deg); }
/* fallback glyph until the icon files land in assets/icons/ */
.disc-ico .glyph{
  display:none; font-family:var(--arabic); font-size:clamp(28px,4vw,44px);
  color:transparent; -webkit-text-stroke:1px #c99b3f;
}
.disc-ico.noimg img{ display:none; }
.disc-ico.noimg .glyph{ display:block; }
.disc-meta{ padding:12px 8px 14px; }
.disc-meta b{ font-family:var(--serif); font-weight:400; font-size:clamp(14px,1.5vw,18px); text-transform:uppercase; letter-spacing:.05em; display:block; line-height:1.2; }
.disc-meta span{ font-family:var(--arabic); font-size:13px; color:var(--text-3); }

/* language flag plaques (The Studio) */
.lang-flags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.flag-card{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line-2); border-radius:3px;
  padding:12px 18px;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.flag-card:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:0 14px 26px -20px rgba(0,0,0,.55); }
.flag-card svg{
  width:46px; height:29px; display:block; border-radius:2px;
  outline:1px solid var(--line-2); flex-shrink:0;
  transition:transform .35s var(--ease);
}
.flag-card:hover svg{ transform:scale(1.08) rotate(-2deg); }
.flag-card b{ font-family:var(--serif); font-weight:400; font-size:17px; text-transform:uppercase; letter-spacing:.06em; display:block; line-height:1.15; }
.flag-card span{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); }

/* larger variant — the About page's own Languages section */
.flag-card.lg{ padding:clamp(20px,3vh,30px) clamp(20px,2.5vw,32px); gap:20px; width:100%; }
.flag-card.lg svg{ width:84px; height:52px; }
.flag-card.lg b{ font-size:clamp(22px,2.6vw,32px); }
.flag-card.lg span{ font-size:10.5px; letter-spacing:.26em; }
.flag-card.lg .ar-name{ font-family:var(--arabic); font-size:16px; color:var(--accent); display:block; margin-top:4px; }

/* smaller hero buttons on phones */
@media(max-width:640px){
  .hero-actions .btn{ padding:11px 20px; font-size:9px; letter-spacing:.24em; }
  .btn{ padding:13px 24px; font-size:10px; }
}

/* footer strip inside last slide */
.foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px var(--pad);
  border-top:1px solid var(--line-2);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-3);
}
.foot .ar{ font-size:15px; color:var(--accent); letter-spacing:0; }
@media(max-width:720px){ .foot{ justify-content:center; flex-wrap:wrap; gap:6px 16px; padding:12px var(--pad); } }

/* ── BUTTONS & LINKS ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; font-weight:400;
  color:var(--text); text-decoration:none; cursor:pointer;
  background:none; border:1px solid var(--line);
  padding:17px 34px; border-radius:40px;
  transition:all .35s var(--ease);
}
.btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text); letter-spacing:.4em; }
.btn.solid{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.solid:hover{ background:transparent; color:var(--text); }

.line-link{
  display:inline-flex; align-items:baseline; gap:10px;
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--text-2); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:color .3s, border-color .3s;
}
.line-link:hover{ color:var(--text); border-color:var(--text); }

/* ── ROWS (services, honours, log) ──────────────────────────────── */
.row{
  display:grid; grid-template-columns:44px 1fr auto; gap:clamp(14px,3vw,32px); align-items:baseline;
  padding:clamp(13px,2vh,22px) 0; border-bottom:1px solid var(--line-2);
  text-decoration:none; position:relative; transition:padding-left .35s var(--ease);
}
a.row:hover{ padding-left:14px; }
a.row::before{
  content:''; position:absolute; left:0; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--accent); transform:translateY(-50%) scale(0); transition:transform .3s var(--ease);
}
a.row:hover::before{ transform:translateY(-50%) scale(1); }
.row .r-num{ font-family:var(--serif); font-size:14px; color:var(--text-3); }
.row .r-name{ font-family:var(--serif); font-size:clamp(19px,2.6vw,30px); text-transform:uppercase; letter-spacing:.04em; line-height:1.15; }
.row .r-name .ar{ text-transform:none; font-size:.68em; color:var(--text-3); margin-left:12px; letter-spacing:0; }
.row .r-side{ text-align:right; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); white-space:nowrap; }
.row .r-side b{ display:block; font-family:var(--serif); font-size:17px; font-weight:400; color:var(--text); letter-spacing:.06em; }
@media(max-width:640px){
  .row{ grid-template-columns:30px 1fr; }
  .row .r-side{ grid-column:2; text-align:left; margin-top:2px; }
  .row .r-side b{ display:inline; margin-right:10px; }
}

/* ── BARS ───────────────────────────────────────────────────────── */
.bar{ height:1px; background:var(--line-2); position:relative; overflow:visible; }
.bar i{ display:block; height:1px; width:0; background:var(--text); transition:width 1.3s var(--ease); position:relative; }
.bar i::after{ content:''; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ── STATS ──────────────────────────────────────────────────────── */
.stats{ display:flex; gap:clamp(24px,6vw,80px); flex-wrap:wrap; }
.stats b{ display:block; font-family:var(--serif); font-size:clamp(38px,5vw,60px); font-weight:400; line-height:1; color:var(--text); }
.stats b .accented{ color:var(--accent); }
.stats span{ display:block; margin-top:8px; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2); }

/* ── WORK CARDS (portfolio + home) ──────────────────────────────── */
.work-card{
  position:relative; overflow:hidden; text-decoration:none;
  border:1px solid var(--line-2); background:var(--bg-2);
  display:flex; flex-direction:column;
  transition:border-color .4s;
}
.work-card:hover{ border-color:var(--line); }
.wc-visual{
  position:relative; overflow:hidden; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--bg-2), var(--bg));
}
.wc-visual .glyph{
  font-family:var(--arabic); font-size:clamp(40px,5vw,72px);
  color:transparent; -webkit-text-stroke:1px var(--text-2);
  transition:transform .8s var(--ease), -webkit-text-stroke-color .4s;
}
.work-card:hover .glyph{ transform:scale(1.12) rotate(-2deg); -webkit-text-stroke-color:var(--text); }
.wc-visual::after{ content:''; position:absolute; inset:12px; border:1px solid var(--line-2); pointer-events:none; }
.wc-meta{ padding:16px 18px 18px; border-top:1px solid var(--line-2); }
.wc-cat{ font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }
.wc-name{ font-family:var(--serif); font-size:19px; text-transform:uppercase; letter-spacing:.04em; margin-top:5px; line-height:1.2; }
.wc-year{ position:absolute; top:14px; right:14px; font-size:9.5px; letter-spacing:.22em; color:var(--text-3); }

/* gallery grid (no scroll hijacking) */
.hgallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:16px;
}
.hgallery .work-card{ height:clamp(280px, 40vh, 400px); }
@media(max-width:520px){ .hgallery{ grid-template-columns:1fr 1fr; } }

/* ── FORM ───────────────────────────────────────────────────────── */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2); margin-bottom:8px; }
.field label b{ color:var(--accent); font-weight:400; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 2px;
  background:transparent; color:var(--text);
  border:0; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:300; font-size:14px;
  transition:border-color .3s; border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--text); }
.field textarea{ resize:vertical; min-height:84px; }
.field ::placeholder{ color:var(--text-3); }

.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  padding:9px 18px; font-family:var(--sans); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer; font-weight:400;
  background:transparent; color:var(--text-2);
  border:1px solid var(--line); border-radius:30px;
  transition:all .25s;
}
.pill:hover{ border-color:var(--text); color:var(--text); }
.pill.on{ background:var(--text); border-color:var(--text); color:var(--bg); }

/* ── REVEAL ─────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ── UTILITIES ──────────────────────────────────────────────────── */
.muted{ color:var(--text-2); }
.small{ font-size:12.5px; }
.tac{ text-align:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,28px); }
@media(max-width:900px){ .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .grid-3{ grid-template-columns:1fr; } }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}

/* short screens: tighten */
@media(max-height:700px){
  :root{ --nav-h:66px; }
  .slide-inner{ padding-bottom:40px; }
}