/* ============================================================
   RK DESIGN — PORTFOLIO
   Design tokens
   ============================================================ */
:root{
  --bg:            #0E0C09;
  --bg-panel:      #16130D;
  --bg-panel-2:    #1E1811;
  --ink:           #F3EEE2;
  --ink-soft:      #C9C0AC;
  --ink-faint:     #948A75;
  --gold:          #C9A768;
  --gold-soft:     #E4C88F;
  --gold-line:     rgba(201,167,104,.35);
  --line:          #2B2519;
  --white:         #FFFDF9;

  --font-display:  'Cairo', 'Tajawal', sans-serif;
  --font-body:     'Tajawal', 'Cairo', sans-serif;

  --container:     1200px;
  --gutter:        clamp(20px, 5vw, 64px);
  --radius:        2px;

  --ease:          cubic-bezier(.22,.68,.15,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold); color:var(--white); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   Typography scale
   ============================================================ */
.eyebrow{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background:var(--gold);
  display:block;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  margin:0;
  color:var(--ink);
  letter-spacing:-.01em;
}

.display-1{ font-size:clamp(40px, 6.4vw, 92px); line-height:1.05; }
.display-2{ font-size:clamp(30px, 4.2vw, 54px); line-height:1.12; }
.display-3{ font-size:clamp(24px, 2.6vw, 34px); line-height:1.2; }

p{ margin:0; }
.lede{
  font-size:clamp(16px, 1.4vw, 19px);
  color:var(--ink-soft);
  font-weight:300;
  line-height:1.9;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{ padding:clamp(64px,10vw,140px) 0; }
.section-tight{ padding:clamp(40px,6vw,80px) 0; }

hr.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ============================================================
   Signature motif — diagonal gold cut
   (echoes the RK mark: the building silhouette sliced on a diagonal)
   ============================================================ */
.cut-frame{
  position:relative;
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.cut-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cut-frame .gold-edge{
  position:absolute;
  right:0; bottom:0;
  width:40px; height:40px;
  background:linear-gradient(135deg, transparent 49%, var(--gold) 50%, var(--gold-soft) 100%);
  opacity:.9;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:fixed;
  top:0; right:0; left:0;
  z-index:100;
  background:rgba(14,12,9,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:.02em;
}
.brand .mark{
  width:34px; height:34px;
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  object-fit:cover;
  background:var(--bg-panel);
}
.brand small{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-faint);
  margin-top:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
}
.nav-links a{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

.nav-cta{
  border:1px solid var(--ink);
  padding:10px 22px;
  font-size:13.5px;
  font-weight:600;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav-cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:none;
  background:none;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute;
  right:9px; left:9px;
  height:1px;
  background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span{ top:21px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-links{
    position:fixed;
    inset:84px 0 0 0;
    background:var(--bg);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:0;
    padding:20px var(--gutter) 40px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    border-bottom:1px solid var(--line);
  }
  .nav-links.is-open{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .nav-links a{
    width:100%;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:17px;
  }
  .nav-links .nav-cta{ margin-top:20px; text-align:center; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:84px;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.35) 55%, rgba(20,17,13,.86) 100%);
}
.hero-content{
  position:relative;
  color:var(--white);
  padding-bottom:clamp(48px,7vw,96px);
  width:100%;
}
.hero-eyebrow{
  color:var(--gold-soft);
  font-size:13px;
  letter-spacing:.24em;
  font-weight:700;
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:14px;
}
.hero-eyebrow::before{ content:""; width:40px; height:1px; background:var(--gold-soft); }
.hero h1{
  color:var(--white);
  font-size:clamp(42px,7.6vw,108px);
  line-height:1;
}
.hero h1 span{ color:var(--gold-soft); }
.hero-roles{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  font-size:clamp(14px,1.4vw,18px);
  font-weight:300;
  color:rgba(255,253,249,.82);
}
.hero-roles b{ font-weight:600; color:var(--white); }
.hero-actions{
  margin-top:44px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 34px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid var(--gold-soft);
  transition:background .35s var(--ease), color .35s var(--ease), transform .3s var(--ease);
}
.btn-solid{ background:var(--gold); color:var(--white); border-color:var(--gold); }
.btn-solid:hover{ background:transparent; color:var(--gold-soft); transform:translateY(-2px); }
.btn-ghost{ color:var(--white); }
.btn-ghost:hover{ background:var(--white); color:var(--bg); border-color:var(--white); transform:translateY(-2px); }
.btn-dark{ border-color:var(--ink); color:var(--ink); }
.btn-dark:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); transform:translateY(-2px); }

.scroll-cue{
  position:absolute;
  bottom:36px; left:var(--gutter);
  writing-mode:vertical-rl;
  color:rgba(255,253,249,.7);
  font-size:12px;
  letter-spacing:.2em;
  display:flex;
  align-items:center;
  gap:14px;
}
.scroll-cue::after{
  content:"";
  width:1px; height:52px;
  background:linear-gradient(var(--gold-soft), transparent);
}
@media (max-width:880px){ .scroll-cue{ display:none; } }

/* ============================================================
   Intro / statement
   ============================================================ */
.statement{
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:var(--gutter);
  align-items:start;
}
@media (max-width:880px){ .statement{ grid-template-columns:1fr; gap:28px; } }

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.stat b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,44px);
  color:var(--ink);
}
.stat span{
  display:block;
  margin-top:6px;
  font-size:13.5px;
  color:var(--ink-faint);
}
@media (max-width:640px){ .stat-row{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   Discipline strip (3 specialties on home)
   ============================================================ */
.discipline-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.discipline{
  position:relative;
  padding:44px 36px;
  border-left:1px solid var(--line);
  transition:background .4s var(--ease);
}
.discipline:last-child{ border-left:none; }
[dir="rtl"] .discipline{ border-left:none; border-right:1px solid var(--line); }
[dir="rtl"] .discipline:last-child{ border-right:none; }
.discipline:hover{ background:var(--bg-panel); }
.discipline .num{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:13px;
  letter-spacing:.15em;
  font-weight:700;
}
.discipline h3{ margin-top:18px; font-size:24px; }
.discipline p{ margin-top:14px; color:var(--ink-soft); font-size:14.5px; font-weight:300; line-height:1.85; }
.discipline .go{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.discipline .go::after{ content:"←"; transition:transform .3s var(--ease); }
[dir="rtl"] .discipline .go::after{ content:"←"; }
.discipline:hover .go::after{ transform:translateX(-6px); }

@media (max-width:880px){
  .discipline-grid{ grid-template-columns:1fr; }
  .discipline{ border-left:none; border-right:none; border-top:1px solid var(--line); }
  .discipline:first-child{ border-top:none; }
}

/* ============================================================
   Section headers (category pages)
   ============================================================ */
.page-hero{
  padding:calc(84px + 64px) 0 60px;
  border-bottom:1px solid var(--line);
}
.page-hero .display-2{ margin-top:20px; max-width:760px; }
.page-hero .lede{ margin-top:22px; max-width:620px; }

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:40px;
}
.filter-btn{
  padding:9px 20px;
  font-size:13.5px;
  font-weight:600;
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.filter-btn:hover{ border-color:var(--gold); color:var(--ink); }
.filter-btn.is-active{ background:var(--gold); border-color:var(--gold); color:var(--bg); }

/* ============================================================
   Project cards / grid
   ============================================================ */
.work-grid{
  columns:2;
  column-gap:var(--gutter);
  margin-top:var(--gutter);
}
.work-grid .card{ break-inside:avoid; margin-bottom:var(--gutter); }
@media (max-width:760px){ .work-grid{ columns:1; } }

.card{
  display:block;
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card.is-visible{ opacity:1; transform:none; }

.card-media{
  position:relative;
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  background:var(--bg-panel-2);
}
.card-media.no-image{ aspect-ratio:1/1; }
.card-media img{
  width:100%; height:auto; display:block;
  transition:transform .8s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.06); }
.card-media .corner{
  position:absolute; right:0; bottom:0;
  width:34px; height:34px;
  background:linear-gradient(135deg, transparent 49%, var(--gold) 50%, var(--gold-soft) 100%);
}
.card-media .tag{
  position:absolute; top:18px; right:18px;
  background:rgba(20,17,13,.72);
  color:var(--white);
  font-size:12px;
  letter-spacing:.08em;
  padding:7px 14px;
  backdrop-filter:blur(4px);
}
.card-media .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,17,13,.55) 100%);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.card:hover .card-media .veil{ opacity:1; }
.card-body{
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.card-body h3{
  font-size:21px;
  transition:color .3s var(--ease);
}
.card:hover .card-body h3{ color:var(--gold); }
.card-meta{
  margin-top:8px;
  font-size:13px;
  color:var(--ink-faint);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.card-arrow{
  width:38px; height:38px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all .3s var(--ease);
}
.card:hover .card-arrow{ background:var(--gold); border-color:var(--gold); color:var(--white); transform:rotate(-45deg); }

/* Featured strip on home (asymmetric) */
.featured-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:var(--gutter);
  margin-top:var(--gutter);
}
.featured-grid .card:first-child .card-media{ aspect-ratio:1/1; }
.featured-grid .card:nth-child(2) .card-media{ aspect-ratio:4/5; }
.featured-grid .card:nth-child(n+3){ grid-column:1 / -1; }
.featured-grid .card:nth-child(n+3) .card-media{ aspect-ratio:21/9; }
.featured-grid .card-media img{ height:100%; object-fit:cover; }
@media (max-width:880px){ .featured-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Placeholder art (for sections without uploaded imagery)
   ============================================================ */
.placeholder-art{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,167,104,.22), transparent 55%),
    linear-gradient(155deg, #2A251D 0%, #14120E 100%);
  color:var(--gold-soft);
  font-family:var(--font-display);
  text-align:center;
  padding:24px;
}
.placeholder-art .ph-inner{ opacity:.9; }
.placeholder-art .ph-mark{
  font-size:13px; letter-spacing:.2em; color:rgba(201,167,104,.7); margin-bottom:10px;
}
.placeholder-art .ph-title{ font-size:22px; font-weight:800; color:var(--white); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  background:linear-gradient(135deg, var(--bg-panel-2) 0%, #000 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; left:-10%; top:-40%;
  width:60%; height:180%;
  background:radial-gradient(circle, rgba(201,167,104,.22), transparent 60%);
}
.cta-band .container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); max-width:560px; }
.cta-band .lede{ color:rgba(255,253,249,.68); margin-top:14px; max-width:480px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  padding:72px 0 32px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:56px;
}
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

.footer-top h4{
  font-size:13px;
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin-bottom:20px;
  font-family:var(--font-body);
  font-weight:700;
}
.footer-top li{ margin-bottom:12px; }
.footer-top a{
  color:var(--ink-soft);
  font-size:14.5px;
  transition:color .3s var(--ease);
}
.footer-top a:hover{ color:var(--gold); }
.footer-brand p{ margin-top:16px; color:var(--ink-soft); font-size:14.5px; max-width:320px; font-weight:300; line-height:1.85; }

.footer-bottom{
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--ink-faint);
}
.social-row{ display:flex; gap:18px; }
.social-row a{
  width:36px; height:36px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:all .3s var(--ease);
}
.social-row a:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   About page
   ============================================================ */
.about-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  align-items:center;
  padding-top:calc(84px + 56px);
}
@media (max-width:880px){ .about-hero{ grid-template-columns:1fr; } }
.about-portrait{
  aspect-ratio:4/5;
  background:var(--bg-panel-2);
  position:relative;
}

.timeline{ margin-top:20px; }
.timeline-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-item .yr{ font-family:var(--font-display); font-weight:800; color:var(--gold); }
.timeline-item h4{ font-size:18px; }
.timeline-item p{ margin-top:8px; color:var(--ink-soft); font-size:14.5px; font-weight:300; }
@media (max-width:560px){ .timeline-item{ grid-template-columns:1fr; gap:6px; } }

.skills-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:30px;
}
@media (max-width:760px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
.skill-card{ border:1px solid var(--line); padding:28px; }
.skill-card h4{ font-size:16px; }
.skill-card ul{ margin-top:14px; }
.skill-card li{ font-size:13.5px; color:var(--ink-soft); margin-bottom:8px; padding-right:16px; position:relative; }
.skill-card li::before{ content:""; position:absolute; right:0; top:8px; width:5px; height:5px; background:var(--gold); border-radius:50%; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  padding-top:calc(84px + 56px);
}
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-list{ margin-top:36px; }
.contact-list li{
  padding:20px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list span{ color:var(--ink-faint); font-size:13px; letter-spacing:.06em; }
.contact-list a, .contact-list strong{ font-size:16px; font-weight:600; }

.form-field{ margin-bottom:22px; }
.form-field label{ display:block; font-size:13px; color:var(--ink-faint); margin-bottom:8px; letter-spacing:.04em; }
.form-field input, .form-field textarea, .form-field select{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:12px 2px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color:var(--gold);
  outline:none;
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-note{ margin-top:18px; font-size:13px; color:var(--ink-faint); }

/* ============================================================
   Project detail page
   ============================================================ */
.project-hero{
  padding-top:calc(84px + 40px);
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.project-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-top:22px;
}
.project-meta-row{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:8px;
}
.project-meta-row div span{ display:block; font-size:12px; color:var(--ink-faint); letter-spacing:.06em; margin-bottom:4px; }
.project-meta-row div strong{ font-size:15px; font-weight:600; }

.project-cover{
  margin-top:var(--gutter);
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  background:var(--bg-panel-2);
}
.project-cover img{ width:100%; height:auto; max-height:82vh; object-fit:contain; display:block; }
.project-cover .placeholder-art{ width:100%; height:auto; }

.project-body{
  display:grid;
  grid-template-columns:1.1fr .8fr;
  gap:var(--gutter);
  padding-top:var(--gutter);
}
@media (max-width:880px){ .project-body{ grid-template-columns:1fr; } }
.project-body .lede{ font-size:17px; }

.spec-list{ border-top:1px solid var(--line); }
.spec-list li{
  display:flex; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.spec-list span{ color:var(--ink-faint); }
.spec-list strong{ font-weight:600; }

.before-after{
  margin-top:var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
}
.before-after figure{ margin:0; position:relative; overflow:hidden; }
.before-after img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.before-after figcaption{
  position:absolute; top:16px; right:16px;
  background:rgba(20,17,13,.72); color:var(--white);
  font-size:12px; letter-spacing:.1em; padding:6px 14px;
}
@media (max-width:640px){ .before-after{ grid-template-columns:1fr; } }

.gallery-grid{
  margin-top:var(--gutter);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:760px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-grid button{
  border:none; padding:0; background:var(--bg-panel-2);
  aspect-ratio:1/1; overflow:hidden; position:relative;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-grid button:hover img{ transform:scale(1.08); }

.next-project{
  border-top:1px solid var(--line);
  padding:64px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.next-project .eyebrow{ margin-bottom:14px; }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(16,14,11,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
  padding:40px;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(1100px,92vw); max-height:86vh;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  border:1px solid rgba(255,253,249,.3);
  color:var(--white);
  background:rgba(255,253,249,.06);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  transition:all .3s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:var(--gold); border-color:var(--gold); }
.lightbox-close{ top:24px; left:24px; }
.lightbox-prev{ top:50%; right:24px; transform:translateY(-50%); }
.lightbox-next{ top:50%; left:24px; transform:translateY(-50%); }
@media (max-width:640px){ .lightbox-prev, .lightbox-next{ width:38px; height:38px; } }

/* ============================================================
   Reveal-on-scroll utility
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,.84,.32,1), transform .8s cubic-bezier(.16,.84,.32,1);
  transition-delay:calc(var(--stagger,0) * 70ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Misc
   ============================================================ */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
}
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{ border:1px solid var(--line); padding:7px 16px; font-size:12.5px; color:var(--ink-soft); }

/* ============================================================
   Admin tool (admin.html) — internal use, simple form styling
   ============================================================ */
.admin-shell{ padding-top:calc(84px + 40px); padding-bottom:100px; }
.admin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  align-items:start;
}
@media (max-width:960px){ .admin-grid{ grid-template-columns:1fr; } }

.admin-card{
  border:1px solid var(--line);
  background:var(--white);
  padding:32px;
}
.admin-card h3{ font-size:18px; margin-bottom:6px; }
.admin-card .help{ font-size:13px; color:var(--ink-faint); margin-bottom:22px; }

.admin-field{ margin-bottom:20px; }
.admin-field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:8px; font-weight:600; }
.admin-field .hint{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
.admin-field input[type=text],
.admin-field input[type=number],
.admin-field select,
.admin-field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--bg);
  padding:11px 12px;
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus{
  border-color:var(--gold); outline:none;
}
.admin-field textarea{ resize:vertical; min-height:80px; }
.admin-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .admin-row{ grid-template-columns:1fr; } }

.admin-field input[type=file]{
  width:100%;
  border:1px dashed var(--line);
  background:var(--bg);
  padding:16px 12px;
  font-size:13px;
}

.file-preview-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.file-preview-row img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); }

.admin-output{
  position:sticky;
  top:110px;
}
.code-box{
  background:var(--bg-panel-2);
  color:#EDE7D9;
  font-family:'Courier New', monospace;
  font-size:12.5px;
  line-height:1.7;
  padding:22px;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:520px;
  overflow:auto;
  direction:ltr;
  text-align:left;
}
.copy-status{ font-size:13px; color:var(--gold); margin-top:12px; min-height:18px; }

.steps-list{ counter-reset: step; margin-top:8px; }
.steps-list li{
  counter-increment: step;
  position:relative;
  padding-right:38px;
  margin-bottom:14px;
  font-size:14px;
  color:var(--ink-soft);
  font-weight:300;
}
.steps-list li::before{
  content: counter(step);
  position:absolute;
  right:0; top:0;
  width:26px; height:26px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--font-display);
  font-weight:800;
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   Admin dashboard — project management list
   ============================================================ */
.project-manage-list{ display:flex; flex-direction:column; gap:12px; }
.project-manage-item{
  display:flex; align-items:center; gap:16px;
  padding:14px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg-panel);
}
.project-manage-item img,
.project-manage-item .thumb-empty{
  width:64px; height:64px; object-fit:cover; border-radius:4px;
  background:var(--bg-panel-2); flex-shrink:0;
}
.project-manage-item .thumb-empty{
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--ink-faint); text-align:center; padding:4px;
}
.project-manage-item .pmi-body{ flex:1; min-width:0; }
.project-manage-item .pmi-title{ font-weight:700; color:var(--ink); }
.project-manage-item .pmi-meta{ font-size:12px; color:var(--ink-faint); margin-top:4px; }
.project-manage-item .pmi-actions{ display:flex; gap:8px; flex-shrink:0; }
.project-manage-item .pmi-actions button{
  border:1px solid var(--line); background:none; color:var(--ink-soft);
  padding:8px 14px; border-radius:4px; font-size:13px; cursor:pointer; font-family:inherit;
  transition:border-color .2s, color .2s;
}
.project-manage-item .pmi-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.project-manage-item .pmi-actions button.danger:hover{ border-color:#c0453a; color:#c0453a; }
.admin-empty-state{ padding:40px; text-align:center; color:var(--ink-faint); border:1px dashed var(--line); border-radius:6px; }