/* =========================================================
   Ahmed Portfolio Elements — v2 design stylesheet
   Shipped with the PLUGIN (not the theme) so pages render
   correctly regardless of which theme is active. This lets the
   new pages be built and previewed on a live site before the
   theme is switched over.
   ========================================================= */
:root{
  --bg:#110F0B;
  --card:#171511;
  --card-2:#1C1A16;
  --border:#2A2620;
  --chip:#2F2D2A;
  --gold:#BA893A;
  --gold-bright:#D3AA5B;
  --white:#FFFFFF;
  --text:#C9C5BE;
  --text-dim:#8E8A82;
  --radius-lg:34px;
  --radius-md:26px;
  --radius-sm:16px;
  --container:1280px;
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* =========================================================
   V2 DESIGN SYSTEM — built to match "MR Ahmed Website
   visualization" mockups. Everything below supersedes the
   earlier GridX-derived styling where class names collide.
   ========================================================= */

/* ---- header / logo ---- */
header{background:rgba(17,15,11,.9);border-bottom:1px solid rgba(186,137,58,.10);}
.nav-row{height:92px;}
.logo img{height:56px;width:auto;}
.logo.is-text{font-size:23px;font-weight:800;color:var(--white);}
nav.main-nav ul{gap:38px;}
nav.main-nav a{font-size:15px;font-weight:600;color:#9C978E;letter-spacing:.1px;}
nav.main-nav a:hover{color:var(--white);}
nav.main-nav a.active{color:var(--gold);}

/* ---- shared v2 card ---- */
.v2card{
  background:linear-gradient(160deg,#1A1814 0%,#141210 60%,#131210 100%);
  border:1px solid rgba(186,137,58,.12);
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
.v2-gold{color:var(--gold-bright);}
.v2-arrow{
  width:42px;height:42px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;color:#161006;
  flex-shrink:0;transition:transform .3s ease,background .3s ease;
}
.v2-arrow:hover{transform:translateX(3px);background:var(--gold-bright);}
.v2-eyebrow{font-size:13px;font-weight:500;color:#B9B4AB;letter-spacing:.4px;display:block;margin-bottom:2px;}
.v2-cardtitle{font-size:27px;font-weight:800;color:var(--gold-bright);line-height:1.1;}

/* ---- HOME bento ---- */
.v2-bento{display:grid;grid-template-columns:repeat(24,1fr);gap:20px;margin:34px 0 22px;}
.v2-bento .b-profile{grid-column:span 10;}
.v2-bento .b-cred{grid-column:span 7;}
.v2-bento .b-proj{grid-column:span 7;}
.v2-bento .b-articles{grid-column:span 6;}
.v2-bento .b-services{grid-column:span 6;}
.v2-bento .b-work{grid-column:span 12;}
@media(max-width:1080px){
  .v2-bento .b-profile,.v2-bento .b-work{grid-column:span 24;}
  .v2-bento .b-cred,.v2-bento .b-proj,.v2-bento .b-articles,.v2-bento .b-services{grid-column:span 12;}
}
@media(max-width:640px){.v2-bento > *{grid-column:span 24 !important;}}

.b-profile{display:flex;align-items:center;gap:26px;padding:28px;min-height:290px;}
.b-profile .pf-body{display:block;}
.b-profile .pf-photo{
  width:190px;height:230px;border-radius:20px;flex-shrink:0;
  background:var(--gold) center/cover no-repeat;
}
.b-profile .pf-name{display:block;font-size:37px;font-weight:900;color:var(--white);line-height:1.02;letter-spacing:-.5px;}
.b-profile .pf-name em{display:block;font-style:normal;color:var(--gold-bright);}
.b-profile .pf-role{display:block;font-size:12px;font-weight:700;color:#CFCAC2;margin-top:12px;line-height:1.45;}

.b-cred,.b-proj,.b-articles,.b-services{
  padding:26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;
}
.b-cred .cardmark{
  position:absolute;top:34px;left:0;right:0;height:120px;
  background:center/contain no-repeat;
}
.b-proj .shotimg,.b-articles .shotimg{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);
  width:76%;height:140px;background:center/contain no-repeat;
}
.b-services .svc-icons{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  width:150px;margin:6px auto 20px;
}
.b-services .svc-icons img{width:100%;border-radius:14px;}
.v2-cardfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;}

.b-work{
  min-height:290px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(17,15,11,.15) 0%,rgba(17,15,11,.86) 62%,#121110 100%),
             var(--work-img,none) center top/cover no-repeat,#141210;
}
.b-work h3{font-size:50px;font-weight:900;color:var(--white);line-height:1.02;letter-spacing:-1px;}
.b-work h3 em{display:block;font-style:normal;color:var(--gold-bright);}

/* ---- marquee ticker ---- */
.v2-ticker{
  border:1px solid rgba(186,137,58,.14);border-radius:100px;
  background:#141210;overflow:hidden;padding:16px 0;margin-bottom:8px;
}
.v2-ticker .track{display:flex;gap:44px;width:max-content;animation:v2scroll 26s linear infinite;}
.v2-ticker span{font-size:16px;color:#CFCAC2;white-space:nowrap;}
.v2-ticker span b{color:var(--gold-bright);}
.v2-ticker .dot{color:var(--gold);font-style:normal;margin-left:6px;}
@keyframes v2scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- ABOUT ME ---- */
.v2-about{display:grid;grid-template-columns:400px 1fr;gap:44px;padding:34px;align-items:start;}
@media(max-width:900px){.v2-about{grid-template-columns:1fr;}}
.v2-about .ab-photo{
  border-radius:24px;background:var(--gold) center/cover no-repeat;
  min-height:640px;
}
.v2-about h1{font-size:clamp(42px,5.6vw,72px);font-weight:900;color:var(--gold-bright);letter-spacing:-1px;line-height:1;margin-bottom:20px;}
.v2-about p{font-size:15.5px;color:#D6D2CB;line-height:1.62;margin-bottom:20px;}
.v2-about p .hl{color:var(--gold-bright);font-weight:700;}
.v2-about h2{font-size:29px;font-weight:900;color:var(--gold-bright);margin:30px 0 16px;letter-spacing:.2px;}
.v2-chips{display:flex;flex-wrap:wrap;gap:10px;}
.v2-chips span{
  background:var(--chip);color:var(--white);
  font-size:13px;font-weight:700;padding:9px 18px;border-radius:100px;
}

/* ---- PROJECTS case studies ---- */
.v2-projects{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:980px){.v2-projects{grid-template-columns:1fr;}}
.v2-case{padding:32px;}
.v2-case .cs-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px;}
.v2-case .cs-kicker{font-size:22px;font-weight:800;color:var(--white);letter-spacing:.4px;line-height:1.15;}
.v2-case .cs-client{font-size:23px;font-weight:800;font-style:italic;color:var(--gold-bright);letter-spacing:.3px;}
.v2-case .cs-logo{width:120px;flex-shrink:0;}
.v2-case .cs-logo img{width:100%;}
.v2-case .cs-intro{font-size:13.5px;color:#CFCAC2;line-height:1.6;margin-bottom:24px;}
.v2-case .cs-secLabel{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.v2-case .cs-num{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;}
.v2-case .cs-num .n{font-size:52px;font-weight:900;color:var(--white);line-height:.82;}
.v2-case .cs-num h4{font-size:26px;font-weight:800;color:var(--gold-bright);line-height:1.1;}
.v2-case .cs-body{font-size:12.5px;color:#B7B3AC;line-height:1.62;margin-bottom:20px;}
.v2-case .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.v2-case .cs-grid img{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover;}
.v2-case .cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.v2-case .cs-pair figure{position:relative;}
.v2-case .cs-pair img{width:100%;border-radius:10px;}
.v2-case .cs-pair figcaption{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#161006;font-size:10px;font-weight:800;
  padding:3px 14px;border-radius:0 0 8px 8px;letter-spacing:.5px;
}

/* ---- PRESS CENTER ---- */
.v2-press h2{
  font-size:clamp(34px,4.6vw,56px);font-weight:900;color:var(--white);
  letter-spacing:-.8px;margin-bottom:12px;
}
.v2-press h2 em{font-style:normal;color:var(--gold-bright);}
.v2-press .lede{font-size:16px;color:#C6C2BB;line-height:1.55;margin-bottom:32px;max-width:640px;}
.v2-press .sec-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;}
.v2-seeall{
  border:1px solid var(--gold);color:var(--gold-bright);border-radius:100px;
  padding:11px 22px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s ease,color .25s ease;
}
.v2-seeall:hover{background:var(--gold);color:#161006;}
.v2-playlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-bottom:70px;}
.v2-play{background:#151310;border-radius:20px;overflow:hidden;border:1px solid rgba(186,137,58,.10);}
.v2-play img{width:100%;aspect-ratio:1/1.06;object-fit:cover;}
.v2-play .pl-foot{padding:18px;text-align:center;}
.v2-play .pl-title{font-size:18px;color:var(--white);margin-bottom:14px;}
.v2-download{
  border:1px solid var(--gold);color:var(--gold-bright);border-radius:100px;
  padding:11px 26px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s ease,color .25s ease;
}
.v2-download:hover{background:var(--gold);color:#161006;}
.v2-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;}
.v2-art img{width:100%;border-radius:14px;aspect-ratio:1/1.02;object-fit:cover;margin-bottom:16px;}
.v2-art h3{font-size:19px;font-weight:600;color:var(--white);margin-bottom:6px;}
.v2-art time{font-size:13px;color:var(--gold);}

/* ---- CONTACTS ---- */
.v2-contact{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;position:relative;}
@media(max-width:960px){.v2-contact{grid-template-columns:1fr;}}
.v2-contact .ct-left{position:relative;display:flex;align-items:center;min-height:520px;}
.v2-contact .ct-left{min-height:600px;}
.v2-contact .ct-photo{
  position:absolute;left:-30px;bottom:0;width:58%;height:100%;
  background:left bottom/contain no-repeat;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 12%);
          mask-image:linear-gradient(to right,#000 62%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 12%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media(max-width:960px){.v2-contact .ct-photo{display:none;}}
.v2-infocard{
  margin-left:auto;width:70%;background:linear-gradient(180deg,#1A1814,#131210);
  border:1px solid rgba(186,137,58,.14);border-radius:24px;padding:30px 24px 30px 44px;
  text-align:center;position:relative;z-index:1;
}
@media(max-width:960px){.v2-infocard{width:100%;margin:0;}}
.v2-infocard h3{
  font-size:29px;font-weight:900;color:var(--white);letter-spacing:-.3px;
  background:#242019;border-radius:12px;padding:10px 8px;margin-bottom:26px;
}
.v2-infocard .row{padding:16px 0;border-bottom:1px solid rgba(186,137,58,.16);}
.v2-infocard .row:last-child{border-bottom:none;}
.v2-infocard .row svg{color:var(--gold);margin:0 auto 10px;display:block;}
.v2-infocard .row span{font-size:14px;color:#DAD6CF;line-height:1.4;display:block;}
.v2-formcard{
  background:linear-gradient(180deg,#191713,#121110);
  border:1px solid rgba(186,137,58,.22);border-radius:26px;padding:34px;
}
.v2-formcard h2{font-size:clamp(30px,3.6vw,44px);font-weight:900;color:var(--white);letter-spacing:-.6px;margin-bottom:24px;}
.v2-formcard h2 em{font-style:normal;color:var(--gold-bright);}
.v2-formcard input,.v2-formcard textarea{
  width:100%;background:#161411;border:1px solid rgba(186,137,58,.22);
  border-radius:12px;padding:16px 18px;color:var(--white);font-size:15px;margin-bottom:14px;
}
.v2-formcard input::placeholder,.v2-formcard textarea::placeholder{color:#8E8A82;}
.v2-formcard input:focus,.v2-formcard textarea:focus{outline:none;border-color:var(--gold);}
.v2-formcard textarea{min-height:150px;resize:vertical;}
.v2-formcard .wpcf7-submit,.v2-formcard button[type=submit]{
  width:100%;background:var(--gold);color:#161006;border:none;
  border-radius:12px;padding:17px;font-size:20px;font-weight:800;cursor:pointer;
  transition:background .25s ease;
}
.v2-formcard .wpcf7-submit:hover,.v2-formcard button[type=submit]:hover{background:var(--gold-bright);}

/* ---- MENTORING pages ---- */
.v2-mentor .mt-hero{padding:44px;margin-bottom:24px;}
.v2-mentor h1{font-size:clamp(38px,5vw,64px);font-weight:900;color:var(--white);letter-spacing:-1px;line-height:1.04;margin-bottom:16px;}
.v2-mentor h1 em{font-style:normal;color:var(--gold-bright);}
.v2-mentor .mt-lede{font-size:16.5px;color:#CFCAC2;line-height:1.6;max-width:720px;}
.v2-mentor .mt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:24px;}
.v2-mentor .mt-item{padding:28px;}
.v2-mentor .mt-item .n{font-size:40px;font-weight:900;color:var(--gold);line-height:1;margin-bottom:12px;}
.v2-mentor .mt-item h3{font-size:20px;font-weight:800;color:var(--white);margin-bottom:10px;}
.v2-mentor .mt-item p{font-size:14px;color:#B7B3AC;line-height:1.6;}
.v2-cta{
  display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:#161006;
  border-radius:100px;padding:16px 34px;font-size:16px;font-weight:800;
  transition:background .25s ease,transform .25s ease;
}
.v2-cta:hover{background:var(--gold-bright);transform:translateY(-2px);}

/* =========================================================
   Elementor Global Style kit override
   Elementor Pro writes a global kit (.elementor-kit-N h1 … h6)
   that is enqueued AFTER this file and matches bare headings
   with the same specificity as our own rules, so it wins and
   repaints every heading in the kit's colour. These rules add
   one extra level of specificity to restore the design.
   ========================================================= */
body .v2-about h1,
body .v2-about h2,
body .v2-case .cs-num h4,
body .v2-cardtitle{color:var(--gold-bright);}

body .v2-press h2,
body .v2-formcard h2,
body .v2-mentor h1,
body .b-work h3,
body .v2-infocard h3,
body .v2-art h3,
body .v2-mentor .mt-item h3,
body .v2-case .cs-kicker{color:var(--white);}

body .v2-press h2 em,
body .v2-formcard h2 em,
body .v2-mentor h1 em,
body .b-work h3 em,
body .v2-case .cs-client{color:var(--gold-bright);}

body .b-profile .pf-name{color:var(--white);}
body .b-profile .pf-name em{color:var(--gold-bright);}
body .v2-play .pl-title{color:var(--white);}
body .v2-case .cs-secLabel{color:var(--gold);}
body .v2-mentor .mt-item .n{color:var(--gold);}

/* Inherited base type. The kit also rewrites body font-weight and
   line-height, which every element that does not declare its own then
   picks up - that is what thickened the body copy and stretched the
   chip rows. Pinning them here fixes both at the root. */
html body[class]{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:400;
  /* Unitless on purpose: children scale from their own font-size, so the
     chips land on 20.8px exactly as the design intends. A fixed 24px would
     be inherited literally and stretch every small element. */
  line-height:1.6;
  letter-spacing:normal;
}
html body[class] .wrap,
html body[class] .wrap h1, html body[class] .wrap h2, html body[class] .wrap h3,
html body[class] .wrap h4, html body[class] .wrap h5, html body[class] .wrap p,
html body[class] .wrap a,  html body[class] .wrap span, html body[class] .wrap li,
html body[class] .wrap time, html body[class] .wrap input,
html body[class] .wrap textarea, html body[class] .wrap button,
html body[class] header, html body[class] footer{font-family:'Inter',sans-serif;}
html body[class] .v2-ticker span{font-weight:400;}

/* ---------------------------------------------------------
   Page background + typography
   Elementor's kit is emitted as `.elementor-kit-N { ... }` on
   the <body> element, which is class-level specificity and so
   beats a plain `body { ... }` rule no matter the load order.
   It repaints the page pure black and swaps the font to the
   kit's global family. Matching with `body[class]` gives one
   more level of specificity and restores the design exactly,
   without needing !important.
   --------------------------------------------------------- */

/* ------------------------------------------------------------------
   Live-site typography lock.

   Elementor's Global Style Kit writes `.elementor-kit-N h1 {...}` which
   has the same specificity as `.v2-about h1` but loads afterwards, so it
   silently wins and repaints the design's type scale. These rules restate
   the design's own typography at (0,1,2) so the kit can never override it.
   Generated from the rules above - do not hand-edit.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Live-site typography lock.

   Elementor's Global Style Kit emits `.elementor-kit-N h1 {...}`, which
   ties the specificity of `.v2-about h1` but loads afterwards - so on the
   live site it silently won and repainted the design's whole type scale
   (h1 fell from 72px/900 to 49px/700, body copy from 400 to 500, and so
   on). Restating the design's own typography at (0,1,2) puts it back
   beyond the kit's reach.

   Generated mechanically from the rules above - do not hand-edit.
   ------------------------------------------------------------------ */
html body[class] .logo.is-text{font-size:23px;font-weight:800;}
html body[class] nav.main-nav a{font-size:15px;font-weight:600;letter-spacing:.1px;}
html body[class] .v2-eyebrow{font-size:13px;font-weight:500;letter-spacing:.4px;}
html body[class] .v2-cardtitle{font-size:27px;font-weight:800;line-height:1.1;}
html body[class] .b-profile .pf-name{font-size:37px;font-weight:900;line-height:1.02;letter-spacing:-.5px;}
html body[class] .b-profile .pf-name em{font-style:normal;}
html body[class] .b-profile .pf-role{font-size:12px;font-weight:700;line-height:1.45;}
html body[class] .b-work h3{font-size:50px;font-weight:900;line-height:1.02;letter-spacing:-1px;}
html body[class] .b-work h3 em{font-style:normal;}
html body[class] .v2-ticker span{font-size:16px;}
html body[class] .v2-ticker .dot{font-style:normal;}
/* Headings the design leaves to inherit still picked up the kit's own
   line-height, because inheritance loses to any explicit rule. This sets
   the design's 1.6 for every v2 heading; the generated rules below come
   later at equal specificity, so any heading with its own line-height
   (h1 at 1, for instance) still wins. */
html body[class] .wrap h1, html body[class] .wrap h2, html body[class] .wrap h3,
html body[class] .wrap h4, html body[class] .wrap h5, html body[class] .wrap h6{line-height:1.6;}
html body[class] .v2-about h1{font-size:clamp(42px,5.6vw,72px);font-weight:900;letter-spacing:-1px;line-height:1;}
html body[class] .v2-about p{font-size:15.5px;line-height:1.62;}
html body[class] .v2-about p .hl{font-weight:700;}
html body[class] .v2-about h2{font-size:29px;font-weight:900;letter-spacing:.2px;}
html body[class] .v2-chips span{font-size:13px;font-weight:700;}
html body[class] .v2-case .cs-kicker{font-size:22px;font-weight:800;letter-spacing:.4px;line-height:1.15;}
html body[class] .v2-case .cs-client{font-size:23px;font-weight:800;font-style:italic;letter-spacing:.3px;}
html body[class] .v2-case .cs-intro{font-size:13.5px;line-height:1.6;}
html body[class] .v2-case .cs-secLabel{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;}
html body[class] .v2-case .cs-num .n{font-size:52px;font-weight:900;line-height:.82;}
html body[class] .v2-case .cs-num h4{font-size:26px;font-weight:800;line-height:1.1;}
html body[class] .v2-case .cs-body{font-size:12.5px;line-height:1.62;}
html body[class] .v2-case .cs-pair figcaption{font-size:10px;font-weight:800;letter-spacing:.5px;}
html body[class] .v2-press h2{font-size:clamp(34px,4.6vw,56px);font-weight:900;letter-spacing:-.8px;}
html body[class] .v2-press h2 em{font-style:normal;}
html body[class] .v2-press .lede{font-size:16px;line-height:1.55;}
html body[class] .v2-seeall{font-size:14px;font-weight:700;}
html body[class] .v2-play .pl-title{font-size:18px;}
html body[class] .v2-download{font-size:15px;font-weight:600;}
html body[class] .v2-art h3{font-size:19px;font-weight:600;}
html body[class] .v2-art time{font-size:13px;}
html body[class] .v2-infocard h3{font-size:29px;font-weight:900;letter-spacing:-.3px;}
html body[class] .v2-infocard .row span{font-size:14px;line-height:1.4;}
html body[class] .v2-formcard h2{font-size:clamp(30px,3.6vw,44px);font-weight:900;letter-spacing:-.6px;}
html body[class] .v2-formcard h2 em{font-style:normal;}
html body[class] .v2-formcard input,
html body[class] .v2-formcard textarea{font-size:15px;}
html body[class] .v2-formcard .wpcf7-submit,
html body[class] .v2-formcard button[type=submit]{font-size:20px;font-weight:800;}
html body[class] .v2-mentor h1{font-size:clamp(38px,5vw,64px);font-weight:900;letter-spacing:-1px;line-height:1.04;}
html body[class] .v2-mentor h1 em{font-style:normal;}
html body[class] .v2-mentor .mt-lede{font-size:16.5px;line-height:1.6;}
html body[class] .v2-mentor .mt-item .n{font-size:40px;font-weight:900;line-height:1;}
html body[class] .v2-mentor .mt-item h3{font-size:20px;font-weight:800;}
html body[class] .v2-mentor .mt-item p{font-size:14px;line-height:1.6;}
html body[class] .v2-cta{font-size:16px;font-weight:800;}

/* ------------------------------------------------------------------
   Small-screen layout fixes.

   The bento is a 24-column grid. Below ~640px each 1fr track computes to
   0px, so a card spanning 24 columns ended up as wide as the accumulated
   gaps alone (23 x 20px = 460px) inside a 390px viewport - roughly 98px
   of horizontal scroll on every phone. Collapsing to a single column at
   that breakpoint removes the cause rather than masking it.

   The auto-fill grids had the same class of bug: minmax(280px,1fr)
   cannot shrink below 280px, so on a 272px content box they overflowed.
   min(280px,100%) lets them collapse cleanly.
   ------------------------------------------------------------------ */
.v2-playlists{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}
.v2-articles{grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));}
.v2-mentor .mt-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}

footer .f-nav{flex-wrap:wrap;row-gap:14px;}

@media(max-width:640px){
  .v2-bento{grid-template-columns:1fr;gap:16px;}
  .v2-bento > *{grid-column:auto !important;}

  .b-profile{flex-direction:column;align-items:flex-start;gap:18px;padding:24px;min-height:0;}
  .b-profile .pf-photo{width:100%;height:300px;}
  .b-cred,.b-proj,.b-articles,.b-services,.b-work{min-height:250px;}

  .v2-about{padding:22px;gap:24px;}
  .v2-about .ab-photo{min-height:380px;}
  .v2-case .cs-grid{grid-template-columns:1fr 1fr;}
  .v2-contact .ct-left{min-height:0;}

  footer .f-nav{gap:18px;}
}

/* ------------------------------------------------------------------
   Elementor Pro form inside the design's Contacts card.

   The form widget ships its own field styling (white inputs, visible
   labels) which does not belong in this layout. These rules restate the
   card's own field design and hide the labels, since the design uses
   placeholders instead. Scoped to .v2-formcard so no other Elementor
   form on the site is affected.
   ------------------------------------------------------------------ */
html body[class] .v2-formcard .elementor-field-group > label{display:none;}
html body[class] .v2-formcard .elementor-field-group{margin-bottom:14px;}
html body[class] .v2-formcard .elementor-field-textual{
  width:100%;background:#161411;border:1px solid rgba(186,137,58,.22);
  border-radius:12px;padding:16px 18px;color:var(--white);font-size:15px;
  line-height:1.4;box-shadow:none;
}
html body[class] .v2-formcard .elementor-field-textual::placeholder{color:#8E8A82;opacity:1;}
html body[class] .v2-formcard .elementor-field-textual:focus{outline:none;border-color:var(--gold);box-shadow:none;}
html body[class] .v2-formcard textarea.elementor-field-textual{min-height:150px;resize:vertical;}
html body[class] .v2-formcard .elementor-field-type-submit{margin-top:4px;}
html body[class] .v2-formcard .elementor-button[type=submit]{
  width:100%;background:var(--gold);color:#161006;border:none;
  border-radius:12px;padding:17px;font-size:20px;font-weight:800;cursor:pointer;
  transition:background .25s ease;
}
html body[class] .v2-formcard .elementor-button[type=submit]:hover{background:var(--gold-bright);}
html body[class] .v2-formcard .elementor-message{font-size:15px;margin-top:12px;}
html body[class] .v2-formcard .elementor-message.elementor-message-success{color:var(--gold-bright);}