/* ==========================================================
   Tawqi.ae — Shared Design System
   Palette: ink navy #101B2D · brass #B9925A · paper #F6F3EC
   Type: Fraunces (display) + Source Sans 3 (body/UI)
   ========================================================== */

/* ---------- Custom properties ---------- */
:root{
  --ink:#101b2d;
  --ink-2:#182741;
  --brass:#b9925a;
  --brass-dark:#93713f;
  --paper:#f6f3ec;
  --paper-2:#efe9dc;
  --charcoal:#2b2f36;
  --sage:#5c7a63;
  --line:#dcd4c2;
  --white:#fffdf9;
  --radius-seal:50%;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Source Sans 3', sans-serif;
  color:var(--charcoal);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3,h4,h5{
  font-family:'Fraunces', serif;
  color:var(--ink);
  margin:0 0 .5em 0;
  font-weight:600;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em 0; max-width:65ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul,ol{padding-left:1.4em; margin:0 0 1em 0;}
ul li,ol li{margin-bottom:.35em; font-size:15px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
@media(max-width:720px){section{padding:64px 0;}}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 24px; border-radius:3px;
  font-weight:600; font-size:14.5px; letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid transparent;
  cursor:pointer; text-align:center;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--ink-2); box-shadow:0 6px 18px rgba(16,27,45,.25);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-brass{background:var(--brass); color:var(--ink);}
.btn-brass:hover{background:var(--brass-dark); color:var(--white);}
.btn-outline-white{color:#fff; border-color:rgba(255,255,255,.5); background:transparent;}
.btn-outline-white:hover{background:rgba(255,255,255,.12);}
.btn-group{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:42px; width:auto; border-radius:2px;}
.seal{
  width:40px;height:40px;border-radius:50%;
  background:conic-gradient(from 210deg, var(--brass) 0deg, var(--brass-dark) 140deg, var(--brass) 360deg);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink); font-family:'Fraunces',serif; font-weight:700; font-size:16px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  flex-shrink:0;
}
.brand-name{font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--ink); letter-spacing:.01em;}
.brand-name span{color:var(--brass-dark);}

nav.main{display:flex; gap:30px; align-items:center;}
nav.main a{font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:6px 0;}
nav.main a.dropdown::after{content:"▾"; font-size:11px; margin-left:5px; color:var(--brass-dark);}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--brass-dark);}

.services-dropdown{position:relative;}
.services-dropdown .mega-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  padding:24px 28px; box-shadow:0 12px 40px rgba(16,27,45,.15);
  z-index:60; min-width:540px;
  font-family:'Source Sans 3',sans-serif;
}
.services-dropdown:hover .mega-menu,
.services-dropdown:focus-within .mega-menu{display:flex; gap:36px;}
.mega-col h6{
  font-family:'Source Sans 3',sans-serif; font-size:12px; font-weight:700;
  color:var(--brass-dark); text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 10px 0;
}
.mega-col ul{list-style:none; padding:0; margin:0;}
.mega-col li{margin-bottom:8px;}
.mega-col a{font-size:14px; color:var(--charcoal);}
.mega-col a:hover{color:var(--brass-dark);}

.header-actions{display:flex; align-items:center; gap:18px;}
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; font-size:13px;
}
.lang-toggle span{padding:5px 12px;}
.lang-toggle span.active{background:var(--ink); color:var(--paper);}
.phone-link{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;}
.mobile-toggle{display:none; background:none; border:none; font-size:26px; color:var(--ink); cursor:pointer;}

@media(max-width:1080px){
  .services-dropdown .mega-menu{min-width:320px;}
  .mega-menu{flex-direction:column!important; gap:18px;}
}
@media(max-width:980px){
  nav.main{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:fixed; top:73px; left:0; right:0; bottom:0;
    background:var(--paper); padding:10px 28px 28px;
    transform:translateX(-100%); transition:transform .25s ease;
    overflow-y:auto; z-index:49;
  }
  nav.main.open{transform:translateX(0);}
  nav.main a{width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:17px;}
  .phone-link{display:none;}
  .mobile-toggle{display:block;}
  nav.main .services-dropdown .mega-menu{
    position:static; transform:none; box-shadow:none; border:none;
    padding:0 0 0 16px; min-width:auto; display:none;
  }
  nav.main .services-dropdown.open .mega-menu{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding:110px 0 90px;
}
.hero::before{
  content:"";
  position:absolute; right:-140px; top:-140px;
  width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(185,146,90,.35);
}
.hero::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:320px; height:320px; border-radius:50%;
  border:1px solid rgba(185,146,90,.25);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;
  position:relative; z-index:2;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-simple{grid-template-columns:1fr!important;}
.hero-simple .hero-visual{display:none;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--brass);
  margin-bottom:22px; letter-spacing:.02em;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--brass);}
.hero h1{
  color:var(--white); font-size:clamp(38px,5vw,58px); line-height:1.06; margin-bottom:22px;
}
.hero h1 em{font-style:italic; color:var(--brass);}
.hero p.lead{color:#cfd6e2; font-size:18px; max-width:52ch;}
.hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:34px; margin-top:52px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--white);}
.hero-stats div span{font-size:13px; color:#a9b2c2;}
.hero-sub{padding:90px 0 70px;}

.seal-graphic{position:relative; width:100%; max-width:400px; margin:0 auto; aspect-ratio:1/1;}
.seal-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(185,146,90,.55);
  animation:spin 40s linear infinite;
}
.seal-ring.inner{inset:38px; border-style:solid; border-color:rgba(246,243,236,.18); animation-duration:0s;}
@keyframes spin{to{transform:rotate(360deg);}}
.seal-core{
  position:absolute; inset:70px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d3ab73, var(--brass) 55%, var(--brass-dark) 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 0 0 6px rgba(16,27,45,.15);
  text-align:center;
}
.seal-core .mark{font-family:'Fraunces',serif; font-size:15px; letter-spacing:.14em; color:var(--ink); font-weight:700;}
.seal-core .sub{font-size:10px; letter-spacing:.18em; color:rgba(16,27,45,.75); margin-top:4px;}

@media(prefers-reduced-motion:reduce){
  .seal-ring{animation:none;}
  *{transition-duration:0s!important; animation-duration:0s!important;}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--paper-2); border-bottom:1px solid var(--line); padding:34px 0;}
.trust .wrap{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between;}
.trust p{margin:0; font-size:13.5px; color:#6b6455; max-width:none;}
.trust-logos{display:flex; gap:28px; flex-wrap:wrap; align-items:center; opacity:.75; font-size:13px; font-weight:600; color:var(--ink);}
.trust-logos span{border:1px solid var(--line); padding:6px 12px; border-radius:2px; background:var(--white);}

/* ---------- Section heads ---------- */
.section-head{max-width:640px; margin-bottom:52px;}
.section-head .kicker{color:var(--brass-dark); font-weight:700; font-size:13px; letter-spacing:.03em; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(28px,3.4vw,38px);}
.section-head p{color:#565b63; font-size:16.5px;}

/* ---------- Pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:900px){.pillars{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;}}
.pillar{background:var(--white); padding:36px 30px; transition:background .2s ease;}
.pillar:hover{background:var(--paper-2);}
.pillar .num{font-family:'Fraunces',serif; font-size:14px; color:var(--brass-dark); margin-bottom:18px; display:block;}
.pillar h3{font-size:20px; margin-bottom:10px;}
.pillar p{font-size:14.5px; color:#565b63; margin-bottom:16px;}
.pillar a.more{font-size:13.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--brass);}

/* ---------- Process ---------- */
.process-wrap{background:var(--ink); color:var(--paper);}
.process-wrap .section-head h2{color:var(--white);}
.process-wrap .section-head p{color:#b7bfcd;}
.process-wrap .kicker{color:var(--brass);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding-top:16px; border-top:1px solid rgba(246,243,236,.25);}
.step .step-num{font-family:'Fraunces',serif; font-size:34px; color:var(--brass); margin-bottom:14px; display:block;}
.step h4{color:var(--white); font-size:17px; margin-bottom:8px;}
.step p{color:#b7bfcd; font-size:14.5px;}

/* ---------- Why Tawqi / why-grid ---------- */
.why-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:flex-start;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;}}
.why-list{display:flex; flex-direction:column; gap:26px;}
.why-item{display:flex; gap:18px;}
.why-icon{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--brass); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; color:var(--brass-dark); font-size:17px;
}
.why-item h4{font-size:17px; margin-bottom:6px;}
.why-item p{font-size:14.5px; color:#565b63; margin-bottom:0;}
.why-visual{background:var(--paper-2); border:1px solid var(--line); padding:36px; border-radius:4px;}
.why-visual .stat-row{display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line);}
.why-visual .stat-row:last-child{border-bottom:none;}
.why-visual .stat-row strong{font-family:'Fraunces',serif; font-size:28px; color:var(--ink);}
.why-visual .stat-row span{font-size:13px; color:#6b6455; max-width:14ch; text-align:right;}

/* ---------- Case studies ---------- */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:900px){.cases{grid-template-columns:1fr;}}
.case-card{background:var(--white); border:1px solid var(--line); padding:32px; border-radius:4px; display:flex; flex-direction:column; height:100%;}
.case-tag{font-size:12.5px; font-weight:700; color:var(--sage); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;}
.case-card h3{font-size:19px; margin-bottom:10px;}
.case-card p{font-size:14.5px; color:#565b63; flex-grow:1;}
.case-result{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink);}

/* ---------- Testimonials ---------- */
.testi-wrap{background:var(--paper-2);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:var(--white); padding:30px; border-radius:4px; border:1px solid var(--line);}
.testi-quote{font-family:'Fraunces',serif; font-size:17px; color:var(--ink); font-style:italic; margin-bottom:20px;}
.testi-who{font-size:13.5px; color:#6b6455; font-weight:600;}
.testi-who span{color:var(--brass-dark);}

/* ---------- Chips / tags ---------- */
.chips{display:flex; flex-wrap:wrap; gap:12px;}
.chip{border:1px solid var(--line); background:var(--white); padding:10px 18px; border-radius:22px; font-size:14px; font-weight:600; color:var(--ink);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink); color:var(--paper); border-radius:6px; padding:56px; position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-70px; bottom:-90px; width:260px; height:260px; border-radius:50%;
  border:1px solid rgba(185,146,90,.35);
}
.cta-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; position:relative; z-index:2;}
@media(max-width:900px){.cta-inner{grid-template-columns:1fr;}}
.cta-band h2{color:var(--white); font-size:30px;}
.cta-band p{color:#c3cad8;}
.quote-form{background:var(--white); border-radius:4px; padding:26px;}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%; padding:12px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:3px;
  font-family:'Source Sans 3',sans-serif; font-size:14.5px; color:var(--charcoal); background:var(--paper);
}
.quote-form button{width:100%;}
.form-error{color:#c0392b; font-size:13px; margin-top:-8px; margin-bottom:12px; display:none;}
.form-success{background:var(--sage); color:#fff; padding:16px; border-radius:4px; text-align:center; font-weight:600; margin-top:12px; display:none;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:20px 0 0; font-size:14px; color:#8b93a3;}
.breadcrumb a{color:var(--brass-dark); font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- Service pages ---------- */
.service-hero{padding:90px 0 60px;}
.service-hero .eyebrow{margin-bottom:14px;}
.service-hero h1{font-size:clamp(32px,4.5vw,48px); margin-bottom:16px;}
.service-hero p.lead{font-size:17px; color:#cfd6e2; max-width:56ch;}
.service-hero .stat-chips{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
.service-hero .stat-chip{
  background:rgba(185,146,90,.2); border:1px solid rgba(185,146,90,.4);
  padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; color:var(--brass);
}

.service-section{padding:80px 0;}
.service-section:nth-child(even){background:var(--paper-2);}
.service-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:28px;}
.service-card{background:var(--white); border:1px solid var(--line); padding:28px; border-radius:4px;}
.service-card h3{font-size:18px; margin-bottom:8px;}
.service-card p{font-size:14.5px; color:#565b63; margin-bottom:0;}
.service-card .card-icon{
  width:46px; height:46px; border-radius:50%; background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:'Fraunces',serif; color:var(--brass-dark); font-size:18px;
}

/* ---------- Checklist ---------- */
.checklist{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px;}
.checklist li{
  list-style:none; padding:12px 16px; background:var(--white); border:1px solid var(--line);
  border-radius:3px; font-size:14.5px;
}
.checklist li::before{content:"✓ "; color:var(--sage); font-weight:700;}

/* ---------- Pricing table ---------- */
.pricing-table{width:100%; border-collapse:collapse; margin-bottom:32px;}
.pricing-table th,.pricing-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line);}
.pricing-table th{
  font-family:'Source Sans 3',sans-serif; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--brass-dark); background:var(--paper-2);
}
.pricing-table td{font-size:15px;}
.pricing-table tr:hover td{background:rgba(185,146,90,.06);}
.pricing-table .price{font-family:'Fraunces',serif; font-weight:600; color:var(--ink); font-size:18px;}
.pricing-table .pillar-label{font-weight:600; color:var(--ink);}
.pricing-table a{color:var(--brass-dark); font-weight:600; border-bottom:1px solid var(--brass);}
.pricing-table a:hover{color:var(--ink);}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  width:100%; background:none; border:none; padding:20px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--ink);
  text-align:left;
}
.faq-question::after{content:"+"; font-size:22px; color:var(--brass-dark); transition:transform .2s;}
.faq-item.open .faq-question::after{content:"−";}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .3s ease; font-size:15px; line-height:1.6; color:#565b63;}
.faq-item.open .faq-answer{max-height:400px; padding-bottom:20px;}

/* ---------- Related services ---------- */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:700px){.related-grid{grid-template-columns:1fr;}}
.related-card{
  display:block; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:4px;
  transition:background .15s;
}
.related-card:hover{background:var(--paper-2);}
.related-card h4{font-size:16px; margin-bottom:6px;}
.related-card p{font-size:13.5px; color:#565b63; margin-bottom:0;}

/* ---------- Blog cards ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.blog-card-img{height:200px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-size:13px; color:#8b93a3;}
.blog-card-body{padding:24px;}
.blog-card-body .date{font-size:12.5px; color:var(--brass-dark); font-weight:600; margin-bottom:8px; display:block;}
.blog-card-body h3{font-size:18px; margin-bottom:8px;}
.blog-card-body p{font-size:14.5px; color:#565b63; margin-bottom:14px;}
.blog-card-body a{font-size:13.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--brass);}

.blog-article{max-width:740px; margin:0 auto;}
.blog-article h1{font-size:clamp(28px,4vw,40px); margin-bottom:12px;}
.blog-article .meta{font-size:14px; color:var(--brass-dark); margin-bottom:32px;}
.blog-article p{font-size:16px; line-height:1.7;}
.blog-article h2{font-size:24px; margin-top:36px;}
.blog-article ul{padding-left:1.4em;}
.blog-article li{margin-bottom:.4em; font-size:16px; line-height:1.6;}
.blog-article blockquote{
  border-left:3px solid var(--brass); padding:16px 24px; margin:28px 0;
  background:var(--paper-2); font-style:italic; color:#565b63;
}
.blog-article a{color:var(--brass-dark); border-bottom:1px solid var(--brass);}

/* ---------- Contact form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-info-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px; margin-bottom:20px;}
.contact-info-card h4{font-size:16px; margin-bottom:10px;}
.contact-info-card p{font-size:14.5px; color:#565b63; margin-bottom:0;}
.contact-form{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:32px;}
.contact-form label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%; padding:12px 14px; margin-bottom:16px; border:1px solid var(--line); border-radius:3px;
  font-family:'Source Sans 3',sans-serif; font-size:14.5px; color:var(--charcoal); background:var(--paper);
}
.contact-form textarea{resize:vertical;}

/* ---------- Map embed ---------- */
.map-wrap{margin-top:40px; border-radius:4px; overflow:hidden; border:1px solid var(--line);}
.map-wrap iframe{width:100%; height:340px; border:0;}

/* ---------- Industries grid ---------- */
.industries-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px;}
.industry-card{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:32px;
  transition:background .15s;
}
.industry-card:hover{background:var(--paper-2);}
.industry-card .ind-icon{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  font-family:'Fraunces',serif; font-size:20px; color:var(--brass-dark);
}
.industry-card h3{font-size:18px; margin-bottom:8px;}
.industry-card p{font-size:14.5px; color:#565b63; margin-bottom:0;}

/* ---------- Portfolio grid ---------- */
.portfolio-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:28px;}
@media(max-width:700px){.portfolio-grid{grid-template-columns:1fr;}}
.portfolio-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:32px;}
.portfolio-card .case-tag{margin-bottom:12px;}
.portfolio-card h3{font-size:20px; margin-bottom:10px;}
.portfolio-card p{font-size:14.5px; color:#565b63;}
.portfolio-card .case-result{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink);}

/* ---------- Careers ---------- */
.role-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:32px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.role-card h3{font-size:20px; margin-bottom:4px;}
.role-card .role-meta{font-size:14px; color:#6b6455; margin-bottom:12px;}
.role-card p{font-size:14.5px; color:#565b63; flex-basis:100%;}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:0; border-bottom:2px solid var(--line); margin-bottom:28px;}
.tab-btn{
  padding:12px 24px; background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-2px; cursor:pointer; font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:#8b93a3;
}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--brass);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Footer ---------- */
footer{background:var(--ink-2); color:#c3cad8; padding:70px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(246,243,236,.12);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
footer h5{color:var(--white); font-family:'Fraunces',serif; font-size:15px; margin-bottom:18px; font-weight:600;}
footer .brand-name{color:var(--white);}
footer p{font-size:14px; color:#a9b2c2;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
footer a{font-size:14px; color:#c3cad8;}
footer a:hover{color:var(--brass);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:13px; color:#8b93a3; flex-wrap:wrap; gap:10px;}

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; left:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.25);
  color:white; font-size:26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
@media(max-width:480px){
  .whatsapp-float{left:16px; bottom:16px; width:50px; height:50px; font-size:22px;}
}

/* ---------- Misc ---------- */
.bg-paper-2{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.bg-ink{background:var(--ink); color:var(--paper);}
.bg-ink .section-head h2{color:var(--white);}
.bg-ink .section-head p{color:#b7bfcd;}
.bg-ink .kicker{color:var(--brass);}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.text-center .section-head{margin-left:auto; margin-right:auto;}
.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;}

/* ==========================================================
   PREMIUM ANIMATIONS & MICRO-INTERACTIONS
   ========================================================== */

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}
.reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-left.revealed{
  opacity:1;
  transform:translateX(0);
}
.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-right.revealed{
  opacity:1;
  transform:translateX(0);
}
.reveal-scale{
  opacity:0;
  transform:scale(.92);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.revealed{
  opacity:1;
  transform:scale(1);
}

/* Stagger children */
.stagger-children > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.stagger-children.revealed > *:nth-child(1){transition-delay:.05s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(2){transition-delay:.12s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(3){transition-delay:.19s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(4){transition-delay:.26s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(5){transition-delay:.33s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(6){transition-delay:.40s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(7){transition-delay:.47s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(8){transition-delay:.54s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(9){transition-delay:.61s; opacity:1; transform:none;}
.stagger-children.revealed > *:nth-child(10){transition-delay:.68s; opacity:1; transform:none;}

/* ---------- Premium button effects ---------- */
.btn{
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.btn:active{
  transform:scale(.97) translateY(1px);
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%), rgba(255,255,255,.3) 0%, transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.btn.ripple::after{
  opacity:1;
  animation:ripple-fade .6s ease-out forwards;
}
@keyframes ripple-fade{
  0%{opacity:.6; transform:scale(0);}
  100%{opacity:0; transform:scale(2.5);}
}
.btn-primary:hover{
  box-shadow:0 8px 24px -4px rgba(16,27,45,.35), 0 2px 8px -2px rgba(16,27,45,.2);
}
.btn-brass:hover{
  box-shadow:0 8px 24px -4px rgba(185,146,90,.4), 0 2px 8px -2px rgba(185,146,90,.25);
  transform:translateY(-1px);
}
.btn-outline:hover{
  box-shadow:0 4px 16px -4px rgba(16,27,45,.2);
  transform:translateY(-1px);
}

/* ---------- Card hover effects ---------- */
.service-card, .case-card, .testi-card, .industry-card, .portfolio-card, .blog-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.service-card:hover, .case-card:hover, .portfolio-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px -12px rgba(16,27,45,.12), 0 4px 12px -4px rgba(16,27,45,.06);
  border-color:rgba(185,146,90,.3);
}
.testi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px -8px rgba(16,27,45,.1);
}
.industry-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px -8px rgba(16,27,45,.1);
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px -12px rgba(16,27,45,.12);
}
.blog-card:hover .blog-card-img{
  background:var(--paper);
}

/* ---------- Link underline animation ---------- */
a.more, .pillar a.more{
  position:relative;
  display:inline-block;
}
a.more::after{
  content:"";
  position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--brass);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
a.more:hover::after{
  width:100%;
}

/* ---------- Glassmorphism panel ---------- */
.glass{
  background:rgba(255,253,249,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(220,212,194,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 32px -8px rgba(16,27,45,.08);
}
.glass-dark{
  background:rgba(16,27,45,.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(246,243,236,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 32px -8px rgba(0,0,0,.3);
}

/* ---------- Kinetic marquee ---------- */
.marquee-wrap{
  overflow:hidden;
  position:relative;
}
.marquee-track{
  display:flex;
  gap:48px;
  animation:marquee 30s linear infinite;
  width:max-content;
}
.marquee-track:hover{
  animation-play-state:paused;
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.marquee-wrap::before, .marquee-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee-wrap::before{left:0; background:linear-gradient(to right, var(--paper-2), transparent);}
.marquee-wrap::after{right:0; background:linear-gradient(to left, var(--paper-2), transparent);}

/* ---------- WhatsApp float animation ---------- */
.whatsapp-float{
  animation:float-bounce 3s ease-in-out infinite;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  animation:none;
  transform:scale(1.1);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
@keyframes float-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* ---------- Seal animation enhancement ---------- */
.seal-graphic{
  animation:seal-entrance 1.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes seal-entrance{
  0%{opacity:0; transform:scale(.7) rotate(-15deg);}
  100%{opacity:1; transform:scale(1) rotate(0deg);}
}
.seal-core{
  animation:seal-pulse 4s ease-in-out infinite;
}
@keyframes seal-pulse{
  0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 0 0 6px rgba(16,27,45,.15);}
  50%{box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 0 0 6px rgba(16,27,45,.2), 0 0 40px rgba(185,146,90,.15);}
}

/* ---------- Hero entrance stagger ---------- */
.hero .eyebrow{
  animation:fade-up .6s cubic-bezier(.16,1,.3,1) .1s both;
}
.hero h1{
  animation:fade-up .7s cubic-bezier(.16,1,.3,1) .2s both;
}
.hero .lead{
  animation:fade-up .7s cubic-bezier(.16,1,.3,1) .35s both;
}
.hero .hero-ctas{
  animation:fade-up .7s cubic-bezier(.16,1,.3,1) .5s both;
}
.hero .hero-stats{
  animation:fade-up .7s cubic-bezier(.16,1,.3,1) .65s both;
}
@keyframes fade-up{
  0%{opacity:0; transform:translateY(20px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ---------- Counter number animation ---------- */
[data-counter]{
  display:inline-block;
  transition:transform .2s;
}

/* ---------- Focus ring enhancement ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:3px;
  transition:outline-offset .15s ease;
}

/* ---------- Smooth section transitions ---------- */
section{
  will-change:auto;
  overflow-x:hidden;
}

/* ---------- CTA band enhanced ---------- */
.cta-band{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cta-band:hover::after{
  border-color:rgba(185,146,90,.5);
}

/* ---------- Footer link hover ---------- */
footer a{
  transition:color .2s ease, transform .15s ease;
  display:inline-block;
}
footer a:hover{
  transform:translateX(3px);
}

/* ---------- Pricing table row hover ---------- */
.pricing-table tbody tr{
  transition:background .2s ease;
}
.pricing-table tbody tr:hover td{
  background:rgba(185,146,90,.04);
}

/* ---------- Tab transition ---------- */
.tab-panel{
  animation:tab-in .35s cubic-bezier(.16,1,.3,1);
}
@keyframes tab-in{
  0%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ---------- FAQ answer slide ---------- */
.faq-answer{
  transition:max-height .4s cubic-bezier(.16,1,.3,1), padding .3s ease;
}

/* ---------- Logo hover ---------- */
.brand img{
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.brand:hover img{
  transform:scale(1.04);
}

/* ---------- Responsive animation cleanup ---------- */
@media(max-width:720px){
  .reveal, .reveal-left, .reveal-right, .reveal-scale{
    transform:none;
  }
  .stagger-children > *{
    transform:none;
  }
}

/* ==========================================================
   PRINT STYLESHEET
   ========================================================== */
@media print{
  /* Hide non-content elements */
  header.site,
  .mobile-toggle,
  .whatsapp-float,
  .lang-toggle,
  .phone-link,
  .btn,
  .hero-ctas,
  .cta-band .btn-group,
  .cta-band form,
  .footer-grid,
  .foot-bottom,
  .breadcrumb,
  .faq-question,
  .related-grid,
  .seal-graphic,
  .trust-logos,
  nav.main,
  .header-actions,
  .services-dropdown .mega-menu,
  iframe,
  .map-wrap,
  script,
  style{
    display:none !important;
  }

  /* Reset layout for print */
  *{
    box-shadow:none !important;
    text-shadow:none !important;
    animation:none !important;
    transition:none !important;
  }

  html{
    font-size:11pt;
  }

  body{
    background:white;
    color:#000;
    line-height:1.5;
  }

  /* Ensure all hidden content is visible for print */
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .stagger-children > *, .faq-answer, .tab-panel{
    opacity:1 !important;
    transform:none !important;
    max-height:none !important;
    display:block !important;
  }
  .tab-panel{
    display:none !important;
  }
  .tab-panel.active{
    display:block !important;
  }

  /* Page layout */
  .wrap{
    max-width:100%;
    padding:0;
    margin:0;
  }

  section{
    padding:24pt 0;
    page-break-inside:avoid;
  }

  .hero{
    background:white !important;
    color:#000 !important;
    padding:24pt 0;
    border-bottom:2pt solid #000;
  }

  .hero h1, .hero .eyebrow, .hero .lead, .hero .hero-stats div strong{
    color:#000 !important;
  }

  .hero .eyebrow::before{
    background:#000;
  }

  .hero .hero-stats div span{
    color:#555 !important;
  }

  .hero p.lead{
    color:#333 !important;
  }

  /* Typography */
  h1{
    font-size:22pt;
    page-break-after:avoid;
  }

  h2{
    font-size:16pt;
    page-break-after:avoid;
  }

  h3{
    font-size:13pt;
    page-break-after:avoid;
  }

  p{
    orphans:3;
    widows:3;
  }

  a{
    color:#000;
    text-decoration:underline;
  }

  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt;
    color:#555;
  }

  /* Tables */
  .pricing-table{
    border:1pt solid #ccc;
  }

  .pricing-table th, .pricing-table td{
    border:1pt solid #ccc;
    padding:6pt 10pt;
  }

  .pricing-table th{
    background:#eee !important;
    color:#000 !important;
  }

  /* Cards — remove backgrounds, use borders */
  .service-card, .case-card, .testi-card, .industry-card,
  .portfolio-card, .blog-card, .role-card, .contact-info-card{
    background:white !important;
    border:1pt solid #ccc;
    break-inside:avoid;
  }

  /* Process steps */
  .process-wrap{
    background:white !important;
    color:#000 !important;
    border-top:2pt solid #000;
  }

  .process-wrap .section-head h2,
  .process-wrap .step h4{
    color:#000 !important;
  }

  .process-wrap .kicker{
    color:#555 !important;
  }

  .process-wrap .step p{
    color:#333 !important;
  }

  .step-num{
    color:#555 !important;
  }

  /* Footer — print as simple text */
  footer{
    background:white !important;
    color:#000 !important;
    border-top:2pt solid #000;
    padding:12pt 0;
  }

  footer h5, footer .brand-name{
    color:#000 !important;
  }

  footer p, footer a, footer li{
    color:#333 !important;
    font-size:10pt;
  }

  /* Checklist items */
  .checklist li{
    background:white !important;
    border:1pt solid #ccc;
  }

  /* CTA band */
  .cta-band{
    background:white !important;
    color:#000 !important;
    border:2pt solid #000;
    border-radius:0;
  }

  .cta-band h2{
    color:#000 !important;
  }

  .cta-band p{
    color:#333 !important;
  }

  /* Chips */
  .chip{
    border:1pt solid #ccc;
    background:white !important;
  }

  /* Page break helpers */
  .hero + .trust,
  .hero-sub + section{
    page-break-before:auto;
  }

  h2{
    page-break-before:auto;
  }

  /* Print header — simple text line */
  body::before{
    content:"Tawqi — Business Setup, Legal Translation & Attestation Services | {{PHONE_MAIN}} | {{EMAIL_INFO}}";
    display:block;
    text-align:center;
    font-size:8pt;
    color:#555;
    padding:6pt 0;
    border-bottom:1pt solid #ccc;
  }

  /* Print footer */
  body::after{
    content:"© 2026 Tawqi Business & Legal Services L.L.C. | {{OFFICE_ADDRESS}} | tawqi.ae";
    display:block;
    text-align:center;
    font-size:8pt;
    color:#555;
    padding:6pt 0;
    border-top:1pt solid #ccc;
    margin-top:24pt;
  }
}