/* ==========================================================================
   AL ZAMAN GROUP OF COMPANIES — base.css
   Redesign 2026 · Premium navy + signature gold, vivid per-sector accents.
   Tokens · Reset · Typography · Layout · Buttons · Forms · Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --gold:        #E29D22;
  --gold-600:    #C9831A;
  --gold-300:    #CDB083;
  --gold-100:    #F6E7C8;
  --gold-glow:   rgba(226,157,34,.28);

  /* Neutrals */
  --ink:         #0A1120;
  --ink-800:     #0F1A2E;
  --ink-700:     #16233C;
  --ink-600:     #22314D;
  --slate:       #5A6B85;
  --slate-300:   #98A5B8;
  --line:        #E6E9EF;
  --line-2:      #D7DCE5;
  --paper:       #FFFFFF;
  --cream:       #FAF7F1;
  --cream-2:     #F3EEE4;

  /* Vivid sector accents */
  --a-hospitality:#E0A800;
  --a-realestate: #E4572E;
  --a-telecom:    #0BA0E3;
  --a-technology: #7C5CFC;
  --a-luxury:     #C9A227;
  --a-bespoke:    #D6336C;
  --a-logistics:  #0EA5A4;
  --a-invest:     #17A34A;
  --a-csr:        #22C55E;
  --a-careers:    #EC4899;

  /* Effects */
  --sh-sm: 0 2px 8px rgba(10,17,32,.06);
  --sh-md: 0 10px 30px rgba(10,17,32,.09);
  --sh-lg: 0 26px 60px rgba(10,17,32,.14);
  --sh-xl: 0 40px 90px rgba(10,17,32,.22);
  --sh-gold: 0 14px 34px var(--gold-glow);

  /* Type */
  --f-display: "Abril Fatface","Playfair Display",Georgia,serif;
  --f-head:    "Poppins","Segoe UI",system-ui,sans-serif;
  --f-body:    "Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Metrics */
  --wrap: 1280px;
  --wrap-narrow: 940px;
  --hdr: 84px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   02. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-700);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; }
hr{ border:0; height:1px; background:var(--line); }
::selection{ background:var(--gold); color:#fff; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--gold),var(--gold-600));
  border-radius:99px; border:3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--gold-600),var(--gold)); }

/* --------------------------------------------------------------------------
   03. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  color:var(--ink);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.015em;
}
h1{ font-size:clamp(2.3rem,5.4vw,4.1rem); }
h2{ font-size:clamp(1.85rem,3.7vw,3rem); }
h3{ font-size:clamp(1.25rem,2.1vw,1.6rem); }
h4{ font-size:1.14rem; }
h5{ font-size:1rem; }

.display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.08;
}
.display em{ font-style:normal; color:var(--gold); }
.display .grad{
  background:linear-gradient(100deg,var(--gold) 0%,#F5C86A 45%,var(--gold-300) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lead{ font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.85; color:var(--slate); }
.muted{ color:var(--slate); }
.tiny{ font-size:.8rem; }
strong,b{ font-weight:700; color:var(--ink); }
.gold{ color:var(--gold); }

.hl{ position:relative; white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.42em;
  background:linear-gradient(90deg,rgba(226,157,34,.42),rgba(226,157,34,.12));
  border-radius:3px; z-index:-1;
}

/* Eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-head); font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-600);
}
.eyebrow::before{
  content:""; width:30px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.light{ color:var(--gold); }

/* Section heading block */
.sec-head{ max-width:770px; margin:0 auto 58px; text-align:center; }
.sec-head.left{ margin-left:0; text-align:left; }
.sec-head .eyebrow{ margin-bottom:16px; }
.sec-head h2{ margin-bottom:18px; }
.sec-head p{ color:var(--slate); font-size:1.06rem; line-height:1.8; }
.sec-head.on-dark h2{ color:#fff; }
.sec-head.on-dark p{ color:rgba(255,255,255,.68); }
.sec-head.tight{ margin-bottom:38px; }

/* --------------------------------------------------------------------------
   04. LAYOUT & GRID
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px; }
.wrap-narrow{ width:100%; max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:26px; }
.section{ padding:clamp(66px,8vw,112px) 0; position:relative; }
.section-sm{ padding:clamp(50px,5.5vw,74px) 0; }
.section-tint{ background:var(--cream); }
.section-dark{ background:var(--ink); color:rgba(255,255,255,.72); }
.section-dark h2,.section-dark h3,.section-dark h4{ color:#fff; }

.bg-ink{ background:var(--ink); }
.bg-ink-2{ background:linear-gradient(160deg,var(--ink) 0%,var(--ink-700) 100%); }
.bg-cream{ background:var(--cream); }

/* Decorative */
.divider-gold{
  height:2px; width:76px; border-radius:2px; margin:0 auto;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0; }
.blob.gold{ background:rgba(226,157,34,.34); }
.blob.teal{ background:rgba(14,165,164,.28); }
.blob.violet{ background:rgba(124,92,252,.26); }
.blob.rose{ background:rgba(214,51,108,.24); }
.grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 75%);
}
.ratio{ position:relative; overflow:hidden; }
.ratio::before{ content:""; display:block; padding-top:var(--pt,62%); }
.ratio > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   05. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:15px 32px; border-radius:99px; overflow:hidden; isolation:isolate; white-space:nowrap;
  font-family:var(--f-head); font-size:.88rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s,border-color .3s,background .3s;
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform .35s var(--ease); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,var(--gold-600),var(--gold));
  transform:translateY(101%);
  transition:transform .45s var(--ease-out);
}
.btn:hover{ transform:translateY(-3px); }
.btn:hover::after{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(4px); }

.btn-gold{
  background:linear-gradient(100deg,var(--gold-600),var(--gold));
  color:#fff; box-shadow:var(--sh-gold);
}
.btn-gold::after{ background:linear-gradient(100deg,var(--gold),#F7D488); }
.btn-dark{ background:var(--ink); color:#fff; box-shadow:var(--sh-md); }
.btn-dark::after{ background:linear-gradient(100deg,var(--ink-600),var(--ink)); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost::after{ background:var(--ink); }
.btn-ghost:hover{ color:#fff; border-color:var(--ink); }
.btn-ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.34); }
.btn-ghost-light::after{ background:#fff; }
.btn-ghost-light:hover{ color:var(--ink); border-color:#fff; }
.btn-wa{
  background:#25D366; color:#06331c; font-weight:700;
  box-shadow:0 14px 34px rgba(37,211,102,.34);
}
.btn-wa::after{ background:#1eb958; }
.btn-sm{ padding:11px 22px; font-size:.78rem; }
.btn-lg{ padding:18px 40px; font-size:.95rem; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-head); font-size:.86rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gold-600);
  transition:color .3s,gap .3s var(--ease);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.link-arrow:hover{ color:var(--gold); gap:.85em; }
.link-arrow:hover svg{ transform:translateX(4px); }
.link-arrow.on-dark{ color:var(--gold); }
.link-arrow.on-dark:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   06. FORMS
   -------------------------------------------------------------------------- */
.field{ margin-bottom:18px; }
.lbl{
  display:block; margin-bottom:8px;
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-600);
}
.req{ color:#E23D3D; }
.inp,.sel,.ta,.file{
  width:100%; padding:14px 17px;
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.96rem; color:var(--ink-700);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.ta{ min-height:132px; resize:vertical; }
.sel{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px;
}
.inp:focus,.sel:focus,.ta:focus,.file:focus{
  outline:0; border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-glow);
}
.inp::placeholder,.ta::placeholder{ color:var(--slate-300); }
.inp:disabled,.sel:disabled{ background:var(--cream); color:var(--slate-300); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 18px; }
.err{ display:none; margin-top:6px; font-size:.8rem; color:#E23D3D; font-weight:600; }
.field.bad .inp,.field.bad .sel,.field.bad .ta,.field.bad .file{
  border-color:#E23D3D; box-shadow:0 0 0 4px rgba(226,61,61,.13);
}
.field.bad .err{ display:block; }
.hp{ position:absolute!important; left:-9999px!important; opacity:0; height:0; overflow:hidden; }

.consent{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.84rem; color:var(--slate); line-height:1.6; margin-top:6px;
}
.consent input{ width:17px; height:17px; flex:none; margin-top:3px; accent-color:var(--gold); }
.consent a{ color:var(--gold-600); text-decoration:underline; }

.file{ padding:11px 14px; cursor:pointer; }
.file::file-selector-button{
  margin-right:13px; padding:8px 17px; border:0; border-radius:99px; cursor:pointer;
  background:var(--ink); color:#fff; font-family:var(--f-head);
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background .3s;
}
.file::file-selector-button:hover{ background:var(--gold-600); }
.file-note{ margin-top:8px; font-size:.8rem; color:var(--slate); }
.file-preview{
  display:none; align-items:center; gap:10px; margin-top:11px;
  padding:11px 14px; background:var(--cream); border-radius:var(--r-sm);
  font-size:.87rem; color:var(--ink-700);
}
.file-preview.on{ display:flex; }
.file-preview svg{ width:19px; height:19px; color:var(--a-invest); flex:none; }
.file-preview button{ margin-left:auto; color:var(--slate); font-size:1.1rem; line-height:1; }
.file-preview button:hover{ color:#E23D3D; }

.alert{
  display:none; align-items:flex-start; gap:12px; margin-bottom:22px;
  padding:16px 19px; border-radius:var(--r); font-size:.92rem; line-height:1.65;
}
.alert.on{ display:flex; }
.alert svg{ width:20px; height:20px; flex:none; margin-top:2px; }
.alert-ok{ background:rgba(23,163,74,.1); color:#136c33; border:1px solid rgba(23,163,74,.28); }
.alert-err{ background:rgba(226,61,61,.09); color:#a52323; border:1px solid rgba(226,61,61,.28); }

/* --------------------------------------------------------------------------
   07. UTILITIES
   -------------------------------------------------------------------------- */
.tc{ text-align:center; }
.tr{ text-align:right; }
.rel{ position:relative; z-index:1; }
.hide{ display:none!important; }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--gold); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }
.nowrap{ white-space:nowrap; }
.mb0{ margin-bottom:0!important; }
.mt0{ margin-top:0!important; }
.mb-1{ margin-bottom:10px; }
.mb-2{ margin-bottom:20px; }
.mb-3{ margin-bottom:32px; }
.mb-4{ margin-bottom:46px; }
.mt-2{ margin-top:20px; }
.mt-3{ margin-top:32px; }
.mt-4{ margin-top:46px; }
.gap-1{ gap:10px; }