:root{
      --brown:#5b3508;
      --brown-2:#3b2108;
      --brown-3:#7b4a13;
      --cream:#ded2bf;
      --cream-2:#f3eadc;
      --ivory:#f7f1e7;
      --ink:#1b130b;
      --muted:#806a55;
      --line:rgba(91,53,8,.18);
      --shadow:0 30px 80px rgba(58,33,8,.14);
      --title:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
      --body:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
    }


    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:hidden}
    body,button,input,textarea,select{font-family:var(--body)}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .page{padding:14px}
    .shell{width:min(1440px,100%);margin:auto}

    .topbar{position:sticky;top:14px;z-index:50;margin-bottom:14px;border:1px solid rgba(91,53,8,.13);border-radius:28px;background:rgba(247,241,231,.82);backdrop-filter:blur(18px);box-shadow:0 14px 44px rgba(58,33,8,.09)}
    .nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 28px}
    .brand{display:flex;align-items:center;gap:14px;min-width:220px}
    .brand img{width:174px;height:auto}
    .menu{display:flex;align-items:center;gap:28px;font-size:17px;color:var(--brown-2)}
    .menu a{position:relative;opacity:.85;transition:.25s}
    .menu a:after{content:"";position:absolute;right:0;bottom:-8px;width:0;height:1px;background:var(--brown);transition:.25s}
    .menu a:hover{opacity:1}
    .menu a:hover:after{width:100%}
    .actions{display:flex;gap:10px;align-items:center}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 22px;border:1px solid transparent;font-weight:700;transition:.25s;white-space:nowrap}
    .btn.primary{background:var(--brown);color:var(--cream-2);box-shadow:0 18px 35px rgba(91,53,8,.18)}
    .btn.primary:hover{transform:translateY(-2px);background:var(--brown-2)}
    .btn.ghost{border-color:var(--line);color:var(--brown)}
    .btn.ghost:hover{background:rgba(91,53,8,.08)}

    .hero{position:relative;min-height:calc(100vh - 118px);overflow:hidden;border-radius:34px;background:radial-gradient(circle at 15% 12%,rgba(123,74,19,.22),transparent 33%),linear-gradient(135deg,#5b3508 0%,#281606 54%,#130b05 100%);color:var(--cream-2);box-shadow:var(--shadow)}
    .hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:86px 86px;mask-image:linear-gradient(90deg,transparent,black 20%,black 76%,transparent);opacity:.45}
    .hero:after{content:"";position:absolute;inset:auto -10% -32% -10%;height:55%;background:radial-gradient(ellipse at center,rgba(222,210,191,.18),transparent 70%)}
    .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:34px;align-items:stretch;min-height:calc(100vh - 118px);padding:44px}
    .hero-copy{display:flex;flex-direction:column;justify-content:center;max-width:760px}
    .eyebrow{display:flex;align-items:center;gap:13px;color:rgba(243,234,220,.78);font-size:16px;letter-spacing:.2px;margin-bottom:28px}
    .eyebrow:before{content:"";width:54px;height:1px;background:currentColor}
    h1{font-family:var(--title);font-weight:700;margin:0;font-size:clamp(58px,8vw,128px);line-height:.95;letter-spacing:-.035em}
    .hero h1 span{display:block;color:var(--cream)}
    .hero-lead{font-size:clamp(20px,2.2vw,32px);line-height:1.55;max-width:680px;color:rgba(247,241,231,.86);margin:30px 0 34px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-panel{position:relative;min-height:640px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,rgba(222,210,191,.16),rgba(222,210,191,.04));border:1px solid rgba(222,210,191,.22)}
    .hero-panel .arch{position:absolute;inset:20px;border-radius:260px 260px 34px 34px;background:linear-gradient(180deg,rgba(222,210,191,.88),rgba(222,210,191,.72));overflow:hidden}
    .heritage-art{position:absolute;inset:0;background:
      radial-gradient(circle at 30% 22%,rgba(91,53,8,.20),transparent 22%),
      linear-gradient(135deg,rgba(91,53,8,.12),transparent 45%),
      repeating-linear-gradient(45deg,rgba(91,53,8,.08) 0 12px,transparent 12px 34px),var(--cream);}
    .heritage-art:before{content:"";position:absolute;inset:9%;border-radius:30px;border:1px solid rgba(91,53,8,.18);background:linear-gradient(135deg,rgba(255,255,255,.12),transparent)}
    .motif{position:absolute;width:74px;height:74px;background:var(--brown);transform:rotate(45deg);opacity:.92}
    .motif.m1{right:28%;top:34%} .motif.m2{right:42%;top:51%;width:52px;height:52px} .motif.m3{right:23%;top:58%;width:52px;height:52px}
    .big-watermark{position:absolute;left:-8%;bottom:-9%;font-family:var(--title);font-size:clamp(150px,21vw,330px);line-height:1;color:rgba(91,53,8,.10);font-weight:700;letter-spacing:-.08em}
    .floating-card{position:absolute;right:30px;bottom:34px;left:30px;border-radius:26px;background:rgba(247,241,231,.86);color:var(--brown-2);padding:26px;border:1px solid rgba(91,53,8,.13);box-shadow:0 24px 50px rgba(58,33,8,.16);backdrop-filter:blur(10px)}
    .floating-card b{font-size:26px;font-family:var(--title)}
    .floating-card p{margin:10px 0 0;color:var(--muted);font-size:17px;line-height:1.6}
    .hero-logo{position:absolute;top:32px;right:34px;width:210px;filter:drop-shadow(0 20px 35px rgba(0,0,0,.12));z-index:3}

    .marquee{margin:14px 0;border-radius:26px;overflow:hidden;background:var(--brown);color:var(--cream-2);border:1px solid rgba(255,255,255,.1)}
    .marquee-track{display:flex;gap:38px;width:max-content;padding:18px 0;animation:marquee 34s linear infinite}
    .marquee span{font-family:var(--title);font-size:28px;white-space:nowrap;color:var(--cream)}
    @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(50%)}}

    section.block{position:relative;border-radius:34px;background:var(--ivory);padding:78px 58px;margin-bottom:14px;overflow:hidden;border:1px solid rgba(91,53,8,.08)}
    .section-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:end;margin-bottom:46px}
    .kicker{color:var(--brown);font-weight:700;margin-bottom:12px}
    h2{font-family:var(--title);font-size:clamp(46px,6vw,94px);line-height:1;margin:0;color:var(--brown-2);letter-spacing:-.035em}
    .section-head p{font-size:22px;line-height:1.75;color:var(--muted);margin:0}
    .about-card{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
    .about-text{border-radius:30px;background:#fffaf2;padding:42px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(91,53,8,.08)}
    .about-text h3{font-family:var(--title);font-size:44px;line-height:1.15;margin:0 0 20px;color:var(--brown)}
    .about-text p{font-size:21px;line-height:1.9;color:#5f4a35;margin:0}
    .quote-box{position:relative;border-radius:30px;background:var(--brown);color:var(--cream-2);padding:42px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
    .quote-box:before{content:"أثر";position:absolute;top:20px;left:30px;font-family:var(--title);font-size:190px;color:rgba(222,210,191,.12);line-height:1}
    .quote-box p{position:relative;margin:0;font-family:var(--title);font-size:clamp(38px,5vw,70px);line-height:1.16}

    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .services-four{grid-template-columns:repeat(4,1fr)}
    .service{position:relative;min-height:360px;border-radius:30px;padding:34px;background:#fffaf2;border:1px solid var(--line);overflow:hidden;transition:.35s}
    .service:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(91,53,8,.13)}
    .service .num{font-family:var(--body);color:rgba(91,53,8,.35);font-size:48px}
    .service h3{font-family:var(--title);font-size:42px;line-height:1.15;color:var(--brown);margin:44px 0 16px}
    .service p{font-size:19px;line-height:1.8;color:#66513d;margin:0}
    .service:after{content:"";position:absolute;left:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:rgba(91,53,8,.08)}

    .journey{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:step}
    .step{position:relative;border-radius:26px;background:var(--cream-2);padding:28px 22px;min-height:190px;border:1px solid var(--line)}
    .step:before{counter-increment:step;content:'0' counter(step);display:block;font-family:var(--body);color:rgba(91,53,8,.35);font-size:38px;margin-bottom:24px}
    .step h3{margin:0 0 10px;font-family:var(--title);font-size:30px;color:var(--brown)}
    .step p{margin:0;color:var(--muted);line-height:1.65}

    .tabs-wrap{display:grid;grid-template-columns:330px 1fr;gap:18px}
    .tabs{display:flex;flex-direction:column;gap:10px}
    .tab-btn{cursor:pointer;border:1px solid var(--line);background:#fffaf2;border-radius:22px;padding:20px 22px;text-align:right;font-family:var(--title);font-size:28px;color:var(--brown);transition:.25s}
    .tab-btn.active,.tab-btn:hover{background:var(--brown);color:var(--cream-2)}
    .tab-panel{display:none;min-height:500px;border-radius:30px;background:linear-gradient(135deg,#fffaf2,var(--cream-2));border:1px solid var(--line);overflow:hidden;grid-template-columns:1fr .9fr}
    .tab-panel.active{display:grid}
    .tab-info{padding:48px;display:flex;flex-direction:column;justify-content:center}
    .tab-info h3{font-family:var(--title);font-size:68px;color:var(--brown);line-height:1;margin:0 0 18px}
    .tab-info .en{font-family:var(--body);font-size:22px;color:var(--muted);margin-bottom:24px}
    .tab-info p{font-size:22px;line-height:1.85;color:#5d4937;margin:0 0 30px}
    .tab-art{position:relative;min-height:500px;background:var(--brown);overflow:hidden}
    .tab-art:before{content:"";position:absolute;inset:0;background:var(--art);opacity:.95}
    .tab-art:after{content:"";position:absolute;inset:40px;border:1px solid rgba(255,255,255,.22);border-radius:26px}
    .crystal{--art:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.12)),repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 12px,transparent 12px 30px),linear-gradient(120deg,#6c4a20,#d9c8aa)}
    .heritage{--art:repeating-linear-gradient(45deg,rgba(255,255,255,.11) 0 8px,transparent 8px 22px),linear-gradient(135deg,#4d2a0b,#8b5316)}
    .wood{--art:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 8px,rgba(255,255,255,.05) 8px 14px),linear-gradient(135deg,#5d3511,#a36f37)}
    .metal{--art:linear-gradient(135deg,#d9d0bf,#7d6a54 48%,#f5ebd9)}
    .clay{--art:repeating-radial-gradient(circle at 40% 30%,rgba(255,255,255,.09) 0 2px,transparent 2px 11px),linear-gradient(135deg,#8a562c,#d3a574)}

    .works{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:240px;gap:14px}
    .work{position:relative;border-radius:30px;overflow:hidden;background:var(--brown);color:var(--cream-2);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.08)}
    .work:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(222,210,191,.18),transparent),var(--pattern);opacity:.95}
    .work.tall{grid-row:span 2}
    .work.wide{grid-column:span 2}
    .work h3,.work p{position:relative;margin:0}
    .work h3{font-family:var(--title);font-size:40px;line-height:1.1}
    .work p{color:rgba(247,241,231,.78);margin-top:8px;font-size:17px}

    .values{display:flex;gap:10px;flex-wrap:wrap}
    .value{flex:1 1 180px;border-radius:999px;background:var(--brown);color:var(--cream-2);padding:22px 26px;text-align:center;font-family:var(--title);font-size:30px}
    .contact{display:grid;grid-template-columns:1fr .75fr;gap:22px;align-items:stretch;background:var(--brown)!important;color:var(--cream-2)!important}
    .contact h2{color:var(--cream)}
    .contact p{font-size:24px;line-height:1.7;color:rgba(247,241,231,.78)}
    .contact-card{border-radius:30px;background:rgba(247,241,231,.08);border:1px solid rgba(247,241,231,.18);padding:34px;display:flex;flex-direction:column;justify-content:center;gap:18px}
    .contact-line{font-family:var(--body);font-size:26px;direction:ltr;text-align:left}
    footer{padding:34px;text-align:center;color:var(--muted)}

    .reveal{opacity:0;transform:translateY(22px);transition:.65s ease}
    .reveal.in{opacity:1;transform:none}
    @media(max-width:1250px){.services-four{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:1050px){.menu{display:none}.hero-inner,.about-card,.section-head,.tabs-wrap,.contact{grid-template-columns:1fr}.hero-panel{min-height:520px}.services{grid-template-columns:1fr}.journey{grid-template-columns:1fr 1fr}.tab-panel.active{grid-template-columns:1fr}.works{grid-template-columns:1fr;grid-auto-rows:260px}.work.tall,.work.wide{grid-column:auto;grid-row:auto}section.block{padding:54px 24px}}
    @media(max-width:640px){.page{padding:8px}.topbar{top:8px}.nav{height:auto;padding:16px;flex-wrap:wrap}.brand img{width:142px}.actions{width:100%;justify-content:space-between}.btn{padding:12px 16px}.hero-inner{padding:26px}.hero-panel{min-height:430px}.hero-logo{width:160px}.journey{grid-template-columns:1fr}.tab-info{padding:30px}.tab-info h3{font-size:46px}}


    /* v6 additions: social links, real works images, contact form */
    .social-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
    .social-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(247,241,231,.28);background:rgba(247,241,231,.08);color:var(--cream-2);border-radius:999px;padding:10px 14px;font-size:14px;font-weight:700;transition:.25s}
    .social-link:hover{transform:translateY(-2px);background:var(--cream);color:var(--brown)}
    .works-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
    .work-photo{position:relative;min-height:330px;overflow:hidden;border-radius:30px;background:var(--brown);box-shadow:0 22px 50px rgba(58,33,8,.12);isolation:isolate}
    .work-photo.tall{min-height:680px;grid-row:span 2}
    .work-photo.wide{grid-column:1 / -1;min-height:380px}
    .work-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.03);transition:transform .8s ease,filter .8s ease}
    .work-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,9,4,.04),rgba(15,9,4,.76));opacity:.92}
    .work-photo:hover img{transform:scale(1.06);filter:saturate(1.04) contrast(1.08)}
    .work-caption{position:absolute;z-index:2;inset:auto 22px 22px 22px;color:var(--cream-2)}
    .work-caption .tag{display:inline-flex;border:1px solid rgba(247,241,231,.35);border-radius:999px;padding:8px 12px;margin-bottom:12px;background:rgba(247,241,231,.12);font-weight:700;font-size:13px}
    .work-caption h3{font-size:clamp(24px,3vw,42px);line-height:1.15;margin:0 0 8px;font-family:var(--title);font-weight:700}
    .work-caption p{margin:0;color:rgba(247,241,231,.82);line-height:1.8}
    .contact{grid-template-columns:1fr 1fr;align-items:stretch}
    .contact-form{background:rgba(247,241,231,.96);border-radius:30px;padding:24px;border:1px solid rgba(91,53,8,.12);box-shadow:0 24px 60px rgba(0,0,0,.13);color:var(--ink)}
    .contact-form h3{margin:0 0 14px;font-size:28px;color:var(--brown)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
    .field.full{grid-column:1 / -1}
    .field label{font-size:14px;font-weight:700;color:var(--brown-2)}
    .field input,.field textarea,.field select{width:100%;border:1px solid rgba(91,53,8,.18);background:#fffaf2;border-radius:18px;padding:13px 14px;font-size:15px;color:var(--ink);outline:none;transition:.2s}
    .field textarea{min-height:128px;resize:vertical}
    .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brown);box-shadow:0 0 0 4px rgba(91,53,8,.08)}
    .form-note{font-size:13px;color:var(--muted);line-height:1.7;margin:10px 0 0}
    .submit-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
    .footer-social{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:16px}
    .footer-social a{border:1px solid rgba(91,53,8,.16);border-radius:999px;padding:9px 12px;color:var(--brown);background:rgba(247,241,231,.55);font-weight:700;font-size:13px}
    @media (max-width:900px){.works-gallery{grid-template-columns:1fr}.work-photo.tall,.work-photo.wide{grid-column:auto;grid-row:auto;min-height:360px}.contact{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}


/* v7: moving works showcase + professional social icons */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#works{padding-bottom:64px}
.works-showcase{position:relative}
.works-scroller{overflow:hidden;mask-image:linear-gradient(to left, transparent, #000 8%, #000 92%, transparent)}
.works-track{display:flex;gap:18px;width:max-content;animation:worksMove 42s linear infinite;will-change:transform}
.works-scroller:hover .works-track{animation-play-state:paused}
.work-card{flex:0 0 360px;display:flex;flex-direction:column;border-radius:30px;background:#fffaf2;border:1px solid var(--line);overflow:hidden;box-shadow:0 22px 55px rgba(58,33,8,.10)}
.work-card__image{height:290px;overflow:hidden;background:var(--brown)}
.work-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .7s ease}
.work-card:hover .work-card__image img{transform:scale(1.06);filter:saturate(1.05) contrast(1.05)}
.work-card__content{padding:22px}
.work-card__content h3{font-family:var(--title);font-size:28px;line-height:1.25;color:var(--brown);margin:0 0 10px}
.work-card__content p{margin:0;color:#6b5643;line-height:1.8;font-size:16px}
.work-card .tag{display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:999px;padding:8px 12px;background:rgba(91,53,8,.08);border:1px solid rgba(91,53,8,.12);color:var(--brown);font-weight:700;font-size:13px}
@keyframes worksMove{from{transform:translateX(0)}to{transform:translateX(calc(50% + 9px))}}
.social-strip,.footer-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.social-link{display:inline-flex !important;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;background:rgba(247,241,231,.10);border:1px solid rgba(247,241,231,.22);color:var(--cream-2);transition:.25s}
.social-link svg{width:20px;height:20px;display:block}
.social-link:hover{transform:translateY(-3px);background:var(--cream);color:var(--brown)}
footer .social-link{background:rgba(91,53,8,.06);border-color:rgba(91,53,8,.16);color:var(--brown)}
footer .social-link:hover{background:var(--brown);color:var(--cream)}
@media (max-width:900px){.work-card{flex-basis:300px}.work-card__image{height:240px}.works-track{animation-duration:36s}}
@media (max-width:640px){.works-scroller{mask-image:none}.work-card{flex-basis:280px}.work-card__content h3{font-size:24px}.social-link{width:44px;height:44px}}

/* v8 requested cleanup */
.work-card{position:relative;flex:0 0 390px;height:470px;border-radius:30px;background:var(--brown);overflow:hidden;padding:0;border:0;box-shadow:0 24px 60px rgba(58,33,8,.16)}
.work-card__image{position:absolute;inset:0;height:100%;width:100%}
.work-card__image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,9,4,.10) 0%,rgba(15,9,4,.18) 38%,rgba(15,9,4,.72) 100%);z-index:1}
.work-card__content{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;padding:0;color:var(--cream-2)}
.work-card__content h3{margin:0;font-family:var(--title);font-weight:700;font-size:clamp(26px,2.8vw,42px);line-height:1.15;color:var(--cream-2);text-shadow:0 10px 28px rgba(0,0,0,.28)}
.work-card__content p,.work-card__content .tag{display:none!important}
@media (max-width:900px){.work-card{flex-basis:320px;height:410px}}
@media (max-width:640px){.work-card{flex-basis:290px;height:380px}}

/* v9: hero video background from YouTube example */
.hero{background:#130b05;min-height:calc(100vh - 118px);display:flex;align-items:stretch}
.hero:before{display:none}
.hero:after{display:none}
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-media iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%) scale(1.18);pointer-events:none;filter:saturate(.95) contrast(1.03) brightness(.82)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,8,4,.28) 0%,rgba(13,8,4,.38) 26%,rgba(20,11,5,.58) 65%,rgba(20,11,5,.80) 100%),linear-gradient(90deg,rgba(20,11,5,.72) 0%,rgba(20,11,5,.48) 30%,rgba(20,11,5,.20) 56%,rgba(20,11,5,.54) 100%)}
.hero-inner{z-index:3;display:flex;align-items:flex-end;min-height:calc(100vh - 118px);padding:48px}
.hero-copy{max-width:760px}
.hero-card{max-width:760px;padding:34px 36px;border-radius:34px;background:rgba(247,241,231,.10);border:1px solid rgba(247,241,231,.18);backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.16)}
.hero .eyebrow{margin-bottom:20px;color:rgba(247,241,231,.84)}
.hero h1{font-size:clamp(52px,7vw,112px);line-height:.96;text-shadow:0 10px 30px rgba(0,0,0,.22)}
.hero-lead{max-width:660px;font-size:clamp(19px,2vw,28px);margin:24px 0 28px;color:rgba(247,241,231,.92)}
.hero-note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 14px;border-radius:999px;background:rgba(247,241,231,.10);border:1px solid rgba(247,241,231,.14);color:rgba(247,241,231,.86);font-size:13px;font-weight:600}
.hero-logo{top:26px;right:30px;width:190px}
@media(max-width:1050px){.hero-inner{padding:28px}.hero-card{padding:28px}.hero-logo{width:160px}.hero h1{font-size:clamp(40px,10vw,80px)}}
@media(max-width:640px){.hero-inner{padding:22px}.hero-card{padding:24px;border-radius:26px}.hero-logo{width:136px;top:20px;right:18px}.hero-media iframe{transform:translate(-50%,-50%) scale(1.35)}}

/* menu font weight update */
.menu, .menu a{font-weight:700!important;}

/* v11 hero refinement */
.hero-inner{align-items:center;padding:56px 48px}
.hero-copy{max-width:920px}
.hero-card{background:none !important;border:0 !important;backdrop-filter:none !important;box-shadow:none !important;padding:0 !important;max-width:860px}
.hero .eyebrow{margin-bottom:18px;font-size:16px;font-weight:600;color:rgba(247,241,231,.88);opacity:0;transform:translateY(26px);animation:heroRise .85s ease .12s forwards}
.hero h1{margin:0;font-size:clamp(54px,7.2vw,116px);line-height:.94;letter-spacing:-.03em;text-shadow:0 14px 42px rgba(0,0,0,.28);opacity:0;transform:translateY(28px);animation:heroRise .95s cubic-bezier(.22,.61,.36,1) .22s forwards}
.hero h1 .line-one{display:block;color:#f7f1e7}
.hero h1 .line-two{display:block;color:#d7bb86}
.hero-lead{max-width:760px;font-size:clamp(18px,2vw,28px);line-height:1.8;margin:24px 0 30px;color:rgba(247,241,231,.92);text-shadow:0 8px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(30px);animation:heroRise .95s ease .42s forwards}
.hero-actions{gap:14px;opacity:0;transform:translateY(32px);animation:heroRise .95s ease .58s forwards}
.hero-actions .btn{padding:16px 24px;font-size:16px;font-weight:700}
.hero-actions .btn.primary{background:#e7cf9f;color:#3b2108;border-color:#e7cf9f;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.hero-actions .btn.primary:hover{background:#f1ddba}
.hero-actions .btn.ghost{background:rgba(247,241,231,.14);border:1px solid rgba(247,241,231,.30);color:#fff;backdrop-filter:blur(6px)}
.hero-actions .btn.ghost:hover{background:rgba(247,241,231,.24);color:#fff}
.hero-note{display:none !important}
@keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero-inner{padding:32px 24px}.hero-copy{max-width:100%}.hero h1{font-size:clamp(42px,11vw,72px)}.hero-lead{font-size:18px}.hero-actions .btn{width:auto}}
@media(max-width:640px){.hero-inner{align-items:end;padding:24px 18px 34px}.hero .eyebrow{font-size:14px}.hero-lead{font-size:16px;line-height:1.9}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%;justify-content:center}}
.menu a{font-weight:700}

/* v12: smaller centered hero text */
.hero-inner{align-items:center !important;justify-content:center !important;text-align:center !important;padding:40px 28px !important}
.hero-copy{max-width:880px !important;margin:0 auto !important;width:100% !important}
.hero-card{max-width:880px !important;margin:0 auto !important;text-align:center !important}
.hero .eyebrow{justify-content:center !important;font-size:15px !important;margin-bottom:16px !important}
.hero .eyebrow:before{width:42px !important}
.hero h1{font-size:clamp(34px,4.8vw,72px) !important;line-height:1.18 !important;letter-spacing:-.015em !important}
.hero-lead{max-width:680px !important;margin:20px auto 26px !important;font-size:clamp(16px,1.45vw,22px) !important;line-height:1.85 !important}
.hero-actions{justify-content:center !important}
.hero-actions .btn{padding:14px 22px !important;font-size:15px !important}
@media(max-width:640px){.hero-inner{padding:28px 18px !important}.hero h1{font-size:32px !important;line-height:1.25 !important}.hero-lead{font-size:15px !important}.hero .eyebrow{font-size:13px !important}.hero-actions{align-items:center !important}.hero-actions .btn{width:100% !important;max-width:310px !important}}

/* v13 hero centered both axes and smaller text */
.hero-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:calc(100vh - 118px) !important;
  padding:40px 24px !important;
}
.hero-copy{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.hero-card{
  max-width:760px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.hero .eyebrow{
  justify-content:center !important;
  text-align:center !important;
  font-size:15px !important;
}
.hero h1{
  font-size:clamp(38px, 4.8vw, 74px) !important;
  line-height:1.02 !important;
  text-align:center !important;
}
.hero-lead{
  max-width:650px !important;
  margin:20px auto 26px !important;
  font-size:clamp(16px, 1.55vw, 22px) !important;
  text-align:center !important;
}
.hero-actions{
  justify-content:center !important;
  align-items:center !important;
  margin:0 auto !important;
}
.hero-actions .btn{
  min-width:190px;
}
@media (max-width: 900px){
  .hero-inner{padding:28px 18px !important;}
  .hero-copy,.hero-card{max-width:640px !important;}
  .hero h1{font-size:clamp(32px, 8vw, 54px) !important;}
  .hero-lead{font-size:16px !important; max-width:560px !important;}
}
@media (max-width: 640px){
  .hero-inner{padding:24px 16px !important;}
  .hero-copy,.hero-card{max-width:100% !important;}
  .hero h1{font-size:clamp(28px, 8vw, 42px) !important;}
  .hero-lead{font-size:15px !important; line-height:1.85 !important;}
  .hero-actions{flex-direction:column !important;}
  .hero-actions .btn{width:100% !important; min-width:0;}
}


/* v14 final hero centering fix */
.hero,
.hero-inner,
.hero-copy,
.hero-card{
  text-align:center !important;
}
.hero{
  display:flex !important;
  align-items:stretch !important;
}
.hero-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:calc(100vh - 118px) !important;
  width:100% !important;
  padding:40px 24px !important;
}
.hero-copy{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero-card{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.hero .eyebrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:0 0 16px !important;
  font-size:15px !important;
}
.hero .eyebrow:before,
.hero .eyebrow:after{
  content:"";
  width:40px;
  height:1px;
  background:currentColor;
  display:block;
}
.hero h1{
  font-size:50px !important;
  line-height:1.5 !important;
  text-align:center !important;
  margin:0 auto !important;
  max-width:900px !important;
}
.hero h1 .line-one,
.hero h1 .line-two{
  display:block !important;
}
.hero-lead{
  font-size:20px !important;
  line-height:1.9 !important;
  max-width:720px !important;
  margin:18px auto 28px !important;
  text-align:center !important;
}
.hero-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  width:100% !important;
  margin:0 auto !important;
}
.hero-actions .btn{
  min-width:210px;
}
/* cancel old alignment rules that could break centering */
.hero-panel,
.floating-card,
.big-watermark,
.arch,
.heritage-art,
.motif{
  display:none !important;
}
@media (max-width: 900px){
  .hero-inner{padding:28px 18px !important;}
  .hero h1{font-size:42px !important; line-height:1.45 !important;}
  .hero-lead{font-size:18px !important;}
}
@media (max-width: 640px){
  .hero-inner{padding:24px 16px !important;}
  .hero h1{font-size:34px !important; line-height:1.4 !important;}
  .hero-lead{font-size:16px !important; line-height:1.85 !important;}
  .hero-actions{flex-direction:column !important;}
  .hero-actions .btn{width:100% !important; min-width:0 !important;}
}


/* v16 hero typing effect */
.hero h1{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:0 !important;}
.hero h1 .line-one,
.hero h1 .line-two{
  display:inline-block !important;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  max-width:max-content;
  margin:0 auto;
}
.hero h1 .line-one{
  color:#f7f1e7 !important;
  border-left:2px solid rgba(247,241,231,.88);
  animation:typingLine1 1.8s steps(18,end) .2s forwards, blinkCaret .8s step-end 3 .2s, hideCaret 0s linear 2s forwards;
}
.hero h1 .line-two{
  color:#d7bb86 !important;
  border-left:2px solid rgba(215,187,134,.95);
  animation:typingLine2 2.1s steps(25,end) 2.2s forwards, blinkCaret .8s step-end 3 2.2s, hideCaret 0s linear 4.3s forwards;
}
@keyframes typingLine1{from{width:0}to{width:var(--w,9.5em)}}
@keyframes typingLine2{from{width:0}to{width:var(--w,17.2em)}}
@keyframes blinkCaret{50%{border-color:transparent}}
@keyframes hideCaret{to{border-color:transparent}}
.hero-lead,
.hero-actions,
.hero .eyebrow{
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .8s ease forwards;
}
.hero .eyebrow{animation-delay:4.2s}
.hero-lead{animation-delay:4.45s}
.hero-actions{animation-delay:4.7s}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
@media (max-width:640px){
  .hero h1 .line-one,
  .hero h1 .line-two{white-space:normal;width:auto;border-left:0;animation:none;}
  .hero .eyebrow{animation-delay:.2s}
  .hero-lead{animation-delay:.45s}
  .hero-actions{animation-delay:.65s}
}


/* v18: section titles 50px */
section.block h2,
.section-head h2,
.about-text h3,
.service h3,
.step h3,
.tab-info h3,
.work-card__content h3,
.contact h2,
.contact-form h3{
  font-size:50px !important;
  line-height:1.35 !important;
}
@media (max-width:900px){
  section.block h2,
  .section-head h2,
  .about-text h3,
  .service h3,
  .step h3,
  .tab-info h3,
  .work-card__content h3,
  .contact h2,
  .contact-form h3{
    font-size:42px !important;
  }
}
@media (max-width:640px){
  section.block h2,
  .section-head h2,
  .about-text h3,
  .service h3,
  .step h3,
  .tab-info h3,
  .work-card__content h3,
  .contact h2,
  .contact-form h3{
    font-size:34px !important;
  }
}


/* final: requested YouTube hero video + balanced overlay */
.hero-media iframe{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:177.78vh!important;
  min-width:100%!important;
  height:56.25vw!important;
  min-height:100%!important;
  transform:translate(-50%,-50%) scale(1.22)!important;
  pointer-events:none!important;
  filter:saturate(.95) contrast(1.04) brightness(.78)!important;
}
.hero-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 50% 46%, rgba(215,187,134,.14), transparent 36%),
    linear-gradient(180deg, rgba(16,9,4,.30) 0%, rgba(16,9,4,.44) 42%, rgba(16,9,4,.78) 100%),
    linear-gradient(90deg, rgba(16,9,4,.52) 0%, rgba(16,9,4,.26) 48%, rgba(16,9,4,.52) 100%)!important;
}
.hero-card{
  position:relative!important;
  z-index:3!important;
}

/* final: real Drive images in works gallery */
.work-card__image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.work-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(18,10,4,.04) 0%, rgba(18,10,4,.12) 38%, rgba(18,10,4,.72) 100%);
}
.work-card__content{z-index:2!important}

/* services product gallery */
.products-showcase{margin-top:14px;border-radius:30px;background:#fffaf2;border:1px solid var(--line);padding:30px 0 34px;overflow:hidden}
.products-head{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 34px 22px}
.products-head h3{font-family:var(--title);font-size:34px;line-height:1.2;color:var(--brown);margin:0}
.products-head p{margin:0;color:#6b5643;font-size:17px;line-height:1.7}
.products-row{overflow:hidden;mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
.products-row + .products-row{margin-top:14px}
.products-track{display:flex;gap:14px;width:max-content;animation:productsMove 70s linear infinite;will-change:transform}
.products-row.reverse .products-track{animation-direction:reverse}
.products-row:hover .products-track{animation-play-state:paused}
.product-item{flex:0 0 230px;height:230px;margin:0;border-radius:24px;overflow:hidden;background:#efe3d0;border:1px solid var(--line)}
.product-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-item:hover img{transform:scale(1.07)}
@keyframes productsMove{from{transform:translateX(0)}to{transform:translateX(calc(50% + 7px))}}
@media (max-width:900px){.products-head{flex-direction:column;align-items:start;padding:0 22px 18px}.products-head h3{font-size:28px}.product-item{flex-basis:180px;height:180px}}
@media (max-width:640px){.products-row{mask-image:none}.product-item{flex-basis:150px;height:150px;border-radius:18px}}
@media (prefers-reduced-motion:reduce){.products-track{animation:none}.products-row{overflow-x:auto}}

/* ===== Laravel build additions ===== */

/* service cards with image (was inline styles) */
.service.has-media{padding:0;overflow:hidden}
.service__media{height:200px;overflow:hidden;border-radius:30px 30px 0 0;background:#efe3d0}
.service__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.service:hover .service__media img{transform:scale(1.05)}
.service__body{padding:28px 34px 34px}
.quote-box.has-media{padding:0;min-height:400px}
.quote-box__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;border-radius:30px}
.quote-box.has-media p{position:relative;z-index:2;padding:42px}

/* language switch */
.lang-switch{font-weight:700;color:var(--brown);border:1px solid var(--line);border-radius:999px;padding:12px 16px;transition:.25s}
.lang-switch:hover{background:rgba(91,53,8,.08)}

/* clickable products + lightbox */
.product-item{cursor:zoom-in;padding:0}
.product-item button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.product-item button:focus-visible{outline:3px solid var(--brown);outline-offset:-3px;border-radius:24px}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(19,11,5,.86);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__figure{margin:0;max-width:min(90vw,900px);max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__img{max-width:100%;max-height:78vh;border-radius:26px;background:#efe3d0;box-shadow:0 30px 80px rgba(0,0,0,.4);transform:scale(.96);transition:transform .3s ease}
.lightbox.open .lightbox__img{transform:none}
.lightbox__caption{color:var(--cream-2);font-size:18px;font-weight:600;text-align:center}
.lightbox__btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(247,241,231,.28);background:rgba(247,241,231,.12);color:var(--cream-2);cursor:pointer;font-size:26px;line-height:1;transition:.2s}
.lightbox__btn:hover{background:var(--cream);color:var(--brown)}
.lightbox__close{top:22px;inset-inline-end:22px}
.lightbox__prev{inset-inline-start:22px;top:50%;transform:translateY(-50%)}
.lightbox__next{inset-inline-end:22px;top:50%;transform:translateY(-50%)}
.lightbox__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(247,241,231,.7);font-size:14px;direction:ltr}
@media (max-width:640px){.lightbox__prev,.lightbox__next{top:auto;bottom:16px;transform:none}.lightbox__btn{width:46px;height:46px}}
body.no-scroll{overflow:hidden}

/* contact form feedback */
.form-alert{border-radius:18px;padding:14px 16px;margin-bottom:14px;font-weight:600;line-height:1.7}
.form-alert.success{background:rgba(46,125,50,.1);color:#245c27;border:1px solid rgba(46,125,50,.25)}
.form-alert.error{background:rgba(183,28,28,.08);color:#8e1c1c;border:1px solid rgba(183,28,28,.2)}
.field .error{color:#8e1c1c;font-size:13px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ===== English (LTR) overrides ===== */
[dir=ltr] .menu a:after{right:auto;left:0}
[dir=ltr] .hero-logo{right:auto;left:30px}
[dir=ltr] .service:after{left:auto;right:-40px}
[dir=ltr] .quote-box:before{left:auto;right:30px}
[dir=ltr] .contact-line{text-align:right}
[dir=ltr] .marquee-track{animation-name:marqueeLtr}
[dir=ltr] .works-track{animation-name:worksMoveLtr}
[dir=ltr] .products-track{animation-name:productsMoveLtr}
[dir=ltr] .hero h1 .line-one,[dir=ltr] .hero h1 .line-two{border-left:0;border-right:2px solid rgba(247,241,231,.88)}
@keyframes marqueeLtr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes worksMoveLtr{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@keyframes productsMoveLtr{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media (max-width:640px){[dir=ltr] .hero-logo{left:18px}}
@media (prefers-reduced-motion:reduce){.works-track{animation:none}.works-scroller{overflow-x:auto}}

/* ===== Mobile menu ===== */
.menu-toggle{display:none}
.mobile-menu{display:none}
@media (max-width:1050px){
  .nav{height:72px;padding:0;padding-inline:20px 14px;flex-wrap:nowrap}
  .nav{justify-content:flex-start;gap:10px}
  .actions{margin-inline-start:auto}
  .actions .lang-switch{display:none}
  .menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fffaf2;cursor:pointer;transition:background .25s,border-color .25s}
  .menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--brown);transition:transform .3s ease,opacity .2s ease}
  .menu-toggle:hover{background:rgba(91,53,8,.08)}
  .menu-toggle:focus-visible{outline:3px solid rgba(91,53,8,.35);outline-offset:2px}
  .menu-toggle[aria-expanded=true]{background:var(--brown);border-color:var(--brown)}
  .menu-toggle[aria-expanded=true] span{background:var(--cream-2)}
  .menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .topbar{transition:box-shadow .3s ease}
  .topbar.menu-open{box-shadow:0 14px 44px rgba(58,33,8,.12),0 0 0 100vmax rgba(19,11,5,.32)}
  .mobile-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
  .mobile-menu[hidden]{display:none}
  .mobile-menu.open{grid-template-rows:1fr}
  .mobile-menu > *{min-height:0;overflow:hidden}
  .mobile-menu{grid-template-columns:1fr}
  .mobile-menu__links{display:flex;flex-direction:column;padding:0 18px;border-top:1px solid transparent;transition:border-color .3s}
  .mobile-menu.open .mobile-menu__links{border-top-color:var(--line)}
  .mobile-menu__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:21px;font-weight:700;color:var(--brown-2);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease,color .2s}
  .mobile-menu__links a b{font-weight:500;font-size:14px;color:rgba(91,53,8,.4);direction:ltr}
  .mobile-menu__links a:hover,.mobile-menu__links a.active{color:var(--brown)}
  .mobile-menu__links a.active b{color:var(--brown)}
  .mobile-menu.open .mobile-menu__links a{opacity:1;transform:none}
  .mobile-menu.open .mobile-menu__links a:nth-child(2){transition-delay:.04s}
  .mobile-menu.open .mobile-menu__links a:nth-child(3){transition-delay:.08s}
  .mobile-menu.open .mobile-menu__links a:nth-child(4){transition-delay:.12s}
  .mobile-menu.open .mobile-menu__links a:nth-child(5){transition-delay:.16s}
  .mobile-menu__footer{display:flex;gap:10px;padding:0 18px}
  .mobile-menu.open .mobile-menu__footer{padding-top:18px}
  .mobile-menu__footer .btn{flex:1}
  .mobile-menu__footer .lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:96px}
  .mobile-menu__social{display:flex;justify-content:center;gap:10px;margin:0;padding:0 18px}
  .mobile-menu.open .mobile-menu__social{padding:16px 18px 20px}
  .mobile-menu__social .social-link{background:rgba(91,53,8,.06);border-color:rgba(91,53,8,.16);color:var(--brown)}
  .mobile-menu__social .social-link:hover{background:var(--brown);color:var(--cream)}
}
@media (max-width:640px){
  .nav{height:64px;padding:0;padding-inline:14px 10px;flex-wrap:nowrap}
  .brand{min-width:0}
  .brand img{width:118px}
  .actions{display:none}
  .menu-toggle{width:44px;height:44px}
  .mobile-menu__links a{font-size:19px;padding:14px 4px}
}
@media (prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu__links a,.menu-toggle span{transition:none!important}}
.menu a.active{opacity:1}
.menu a.active:after{width:100%}
/* keep section tops clear of the sticky header when jumping from the menu */
main section[id]{scroll-margin-top:110px}
@media (max-width:640px){main section[id]{scroll-margin-top:84px}}
/* touch & hold pauses the galleries on phones */
.works-scroller:active .works-track,.products-row:active .products-track{animation-play-state:paused}

/* ===== Oct 2026 client revisions ===== */

/* Section head without an intro paragraph: the title takes the full width */
.section-head.no-intro{grid-template-columns:1fr}
.section-head.no-intro h2{max-width:1100px}

/* Services grid follows the number of cards */
.services-count-1{grid-template-columns:1fr}
.services-count-2{grid-template-columns:repeat(2,1fr)}
.services-count-3{grid-template-columns:repeat(3,1fr)}
.services-count-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1250px){.services-count-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.services[class*=services-count-]{grid-template-columns:1fr}}

/* Our values */
section.values-block{background:var(--brown);color:var(--cream-2);border-color:rgba(255,255,255,.08)}
.values-block::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 0%,rgba(215,187,134,.16),transparent 45%),repeating-linear-gradient(45deg,rgba(247,241,231,.025) 0 10px,transparent 10px 28px)}
.values-block .section-head{position:relative}
.values-block .kicker{color:rgba(247,241,231,.7)}
.values-block h2{color:var(--cream)}
.values-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.value-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:200px;padding:26px 24px;border-radius:26px;background:rgba(247,241,231,.06);border:1px solid rgba(247,241,231,.16);overflow:hidden;transition:transform .35s ease,background .35s ease,border-color .35s ease}
.value-card:hover{transform:translateY(-6px);background:rgba(247,241,231,.11);border-color:rgba(215,187,134,.45)}
.value-card__num{font-size:15px;color:rgba(247,241,231,.45);direction:ltr;align-self:flex-start}
.value-card__mark{position:absolute;top:28px;inset-inline-end:26px;width:16px;height:16px;transform:rotate(45deg);background:#d7bb86;opacity:.85}
.value-card h3{margin:0;font-family:var(--title);font-size:32px;line-height:1.2;color:var(--cream)}
@media(max-width:640px){.values-grid{grid-template-columns:1fr 1fr}.value-card{min-height:150px;gap:24px;padding:22px 18px}.value-card h3{font-size:24px}.value-card:last-child:nth-child(odd){grid-column:1/-1}}

/* Products: static grid */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.products-grid .product-item{flex:none;width:auto;height:auto;aspect-ratio:1/1;border-radius:26px;box-shadow:0 14px 34px rgba(58,33,8,.07)}
.products-grid .product-item[hidden]{display:none}
.products-more{display:flex;justify-content:center;margin-top:28px}
.products-more .btn{min-width:240px;cursor:pointer;background:transparent;font-size:16px}
@media(max-width:1050px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}.products-grid .product-item{border-radius:18px}}

/* Journey: step titles sized for five narrow columns */
.step h3{font-size:26px!important;line-height:1.35!important}
@media(max-width:640px){.step h3{font-size:24px!important}}

/* Contact pills (email + phone numbers) */
.contact-pills{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:540px;margin-top:24px}
.contact-pill{display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 18px;border-radius:999px;border:1px solid rgba(247,241,231,.32);color:var(--cream-2);font-weight:700;font-size:16px;letter-spacing:.2px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.contact-pill--wide{grid-column:1/-1;font-size:18px}
.contact-pill:hover{background:var(--cream);border-color:var(--cream);color:var(--brown)}
@media(max-width:640px){.contact-pills{grid-template-columns:1fr}.contact-pill{font-size:15px}}

/* Works: landscape cards for the new 16:9 product shots, light overlay (no captions) */
.work-card{flex:0 0 560px;height:315px;background:#efe3d0}
.work-card::before,.work-card__image:after{background:linear-gradient(180deg,transparent 70%,rgba(58,33,8,.10) 100%)!important}
@media (max-width:900px){.work-card{flex-basis:440px;height:248px}}
@media (max-width:640px){.work-card{flex-basis:300px;height:169px;border-radius:22px}}