/* ==========================================================================
   SardarCo — Frontend Styles
   All colours/fonts driven by CSS custom properties (single source of truth).
   ========================================================================== */

:root{
  --ap-ink:#222222;
  --ap-ink-soft:#4A4A4A;
  --ap-muted:#7A7A7A;
  --ap-gold:#BA9C74;
  --ap-line:#E6E2DC;
  --ap-bg:#FFFFFF;
  --ap-bg-alt:#F7F5F2;
  --ap-bg-dark:#222222;
  --ap-alert-bg:#FFF8F2;
  --ap-alert-border:#C2410C;
  --ap-alert-text:#7C2D12;
  --ap-font-display:"Cormorant Garamond",Georgia,serif;
  --ap-font-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --ap-radius:4px;
}

/* --------------------------------------------------------------- base */
.ap-section{position:relative;font-family:var(--ap-font-body);color:var(--ap-ink-soft);line-height:1.75}
.ap-section *{box-sizing:border-box}
.ap-wrap{width:100%;max-width:1160px;margin:0 auto;position:relative;z-index:1}
.ap-section img{max-width:100%;display:block}
.ap-section a{color:var(--ap-gold);text-decoration:none}
.ap-section a:hover{text-decoration:underline}
.ap-section :focus-visible{outline:2px solid var(--ap-gold);outline-offset:3px}

.ap-section h1,.ap-section h2,.ap-section h3,.ap-section h4{
  font-family:var(--ap-font-display);color:var(--ap-ink);
  font-weight:600;line-height:1.18;margin:0 0 .5em
}
.ap-section h1{font-size:clamp(38px,5.4vw,62px);letter-spacing:-.01em}
.ap-section h2{font-size:clamp(29px,3.6vw,42px)}
.ap-section h3{font-size:clamp(22px,2.4vw,28px)}
.ap-section h4{font-size:20px}
.ap-section p{margin:0 0 1.05em}
.ap-lead{font-size:clamp(17px,1.5vw,19.5px)}

/* dark variant */
.ap-section--dark{background:var(--ap-bg-dark);color:#D6D2CC}
.ap-section--dark h1,.ap-section--dark h2,.ap-section--dark h3,.ap-section--dark h4{color:#fff}
.ap-section--dark p{color:#C2BDB6}
.ap-section--alt{background:var(--ap-bg-alt)}

/* --------------------------------------------------------------- eyebrow */
.ap-eyebrow{
  font-family:var(--ap-font-body);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ap-gold);
  display:flex;align-items:center;gap:12px;margin:0 0 16px
}
.ap-eyebrow::after{content:"";height:1px;flex:1;background:var(--ap-line);max-width:80px}
.ap-eyebrow--center{justify-content:center}
.ap-eyebrow--center::before{content:"";height:1px;flex:1;background:var(--ap-line);max-width:80px}

/* --------------------------------------------------------------- buttons */
.ap-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:var(--ap-radius);
  font-family:var(--ap-font-body);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:.25s ease;border:1px solid transparent;cursor:pointer
}
.ap-btn:hover{text-decoration:none}
.ap-btn--primary{background:var(--ap-gold);color:#fff}
.ap-btn--primary:hover{background:var(--ap-ink);color:#fff}
.ap-btn--ghost{border-color:currentColor;color:var(--ap-ink);background:transparent}
.ap-btn--ghost:hover{background:var(--ap-ink);color:#fff;border-color:var(--ap-ink)}
.ap-section--dark .ap-btn--ghost{color:#fff}
.ap-section--dark .ap-btn--ghost:hover{background:#fff;color:var(--ap-ink)}
.ap-btn-group{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* --------------------------------------------------------------- header */
.ap-header{background:var(--ap-bg);border-bottom:1px solid var(--ap-line);position:relative;z-index:99}
.ap-header--sticky{position:sticky;top:0}
.ap-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ap-header__logo img{max-height:56px;width:auto}
.ap-header__logo-text{font-family:var(--ap-font-display);font-size:24px;font-weight:600;color:var(--ap-ink)}
.ap-nav{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.ap-nav a{
  font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ap-ink);
  text-transform:uppercase;padding:6px 0;position:relative
}
.ap-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--ap-gold);transition:width .25s
}
.ap-nav a:hover{text-decoration:none}
.ap-nav a:hover::after{width:100%}
.ap-header__actions{display:flex;align-items:center;gap:12px}
.ap-burger{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px
}
.ap-burger span{display:block;width:24px;height:2px;background:var(--ap-ink);transition:.25s}
.ap-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ap-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ap-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------- breadcrumb */
.ap-crumb{border-bottom:1px solid var(--ap-line);font-size:13px;color:var(--ap-muted)}
.ap-crumb a{color:var(--ap-muted)}
.ap-crumb .ap-crumb__sep{margin:0 8px;opacity:.5}

/* --------------------------------------------------------------- hero */
.ap-hero{overflow:hidden}
.ap-hero__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:48px;align-items:start}
.ap-hero__sub{
  font-family:var(--ap-font-display);font-size:clamp(19px,2.1vw,25px);
  color:var(--ap-gold);line-height:1.4;margin:0 0 28px;max-width:34ch
}
.ap-hero__copy p{max-width:62ch}
.ap-hero__card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ap-radius);padding:32px
}
.ap-hero__card ul{list-style:none;margin:0 0 22px;padding:0}
.ap-hero__card li{
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);
  font-size:14.5px;display:flex;gap:10px
}
.ap-hero__card li:last-child{border-bottom:0}
.ap-hero__card li::before{content:"—";color:var(--ap-gold)}

/* --------------------------------------------------------------- intro */
.ap-intro__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.ap-intro__aside{border-left:2px solid var(--ap-gold);padding-left:24px}
.ap-intro__aside p{font-family:var(--ap-font-display);font-size:22px;line-height:1.45;color:var(--ap-ink);margin:0}

/* --------------------------------------------------------------- services */
.ap-services__list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--ap-line);margin:40px 0 0;padding:0
}
.ap-services__list li{
  list-style:none;padding:20px 24px 20px 0;
  border-bottom:1px solid var(--ap-line);
  font-size:15.5px;color:var(--ap-ink);
  display:flex;align-items:flex-start;gap:12px
}
.ap-services__list li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:11px;
  background:var(--ap-gold);transform:rotate(45deg)
}
.ap-quicklinks{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;
  padding-top:32px;border-top:1px solid var(--ap-line)
}
.ap-quicklinks__label{width:100%;font-size:14px;color:var(--ap-muted);margin:0 0 4px}
.ap-chip{
  display:inline-block;padding:10px 20px;border:1px solid var(--ap-line);
  border-radius:100px;font-size:14px;color:var(--ap-ink);
  background:var(--ap-bg);transition:.2s
}
.ap-chip:hover{border-color:var(--ap-gold);color:var(--ap-gold);text-decoration:none}

/* --------------------------------------------------------------- practice block */
.ap-practice__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.ap-practice__head--sticky{position:sticky;top:28px;align-self:start}
.ap-practice__num{
  font-family:var(--ap-font-display);font-size:15px;color:var(--ap-gold);
  letter-spacing:.1em;display:block;margin-bottom:10px
}
.ap-checklist{list-style:none;margin:22px 0;padding:0}
.ap-checklist li{
  position:relative;padding:9px 0 9px 30px;font-size:15.5px;
  border-bottom:1px dashed var(--ap-line);color:var(--ap-ink)
}
.ap-checklist li:last-child{border-bottom:0}
.ap-checklist li::before{
  content:"";position:absolute;left:4px;top:17px;width:12px;height:2px;background:var(--ap-gold)
}
.ap-learnmore{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ap-gold);margin-top:8px
}
.ap-learnmore::after{content:"\2192";transition:transform .2s}
.ap-learnmore:hover{text-decoration:none}
.ap-learnmore:hover::after{transform:translateX(4px)}

.ap-alert{
  background:var(--ap-alert-bg);border-left:3px solid var(--ap-alert-border);
  padding:18px 22px;border-radius:0 var(--ap-radius) var(--ap-radius) 0;
  font-size:15.5px;color:var(--ap-alert-text);margin:20px 0 0
}

/* --------------------------------------------------------------- process */
.ap-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ap-line);margin-top:44px}
.ap-process__step{background:var(--ap-bg);padding:34px 30px}
.ap-process__step .ap-process__num{
  font-family:var(--ap-font-body);font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--ap-gold);display:block;margin-bottom:14px
}
.ap-process__step h3{font-size:22px;margin-bottom:10px}
.ap-process__step p{font-size:15px;margin:0}

/* --------------------------------------------------------------- why us */
.ap-why{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ap-why__label{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ap-gold);margin-bottom:6px}
.ap-why__list{list-style:none;margin:0;padding:0}
.ap-why__list li{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:15.5px;color:#DDD9D3;display:flex;gap:14px;align-items:flex-start
}
.ap-why__list li::before{content:"\2713";color:var(--ap-gold);font-size:14px;flex:none;margin-top:2px}
.ap-section:not(.ap-section--dark) .ap-why__list li{border-bottom-color:var(--ap-line);color:var(--ap-ink)}

/* --------------------------------------------------------------- cta band */
.ap-cta{text-align:center}
.ap-cta h2{max-width:20ch;margin-left:auto;margin-right:auto}
.ap-cta p{max-width:62ch;margin-left:auto;margin-right:auto;margin-bottom:28px}
.ap-cta .ap-btn-group{justify-content:center}

/* --------------------------------------------------------------- faq */
.ap-faq{max-width:900px;margin:40px auto 0}
.ap-faq details{border-bottom:1px solid var(--ap-line)}
.ap-faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--ap-font-display);font-size:20px;font-weight:600;
  color:var(--ap-ink);line-height:1.35
}
.ap-faq summary::-webkit-details-marker{display:none}
.ap-faq summary::after{
  content:"+";position:absolute;right:6px;top:20px;
  font-family:var(--ap-font-body);font-size:24px;font-weight:300;
  color:var(--ap-gold)
}
.ap-faq details[open] summary::after{content:"\2212"}
.ap-faq__body{padding:0 40px 24px 0;font-size:15.5px}
.ap-faq__body p{margin:0}

/* --------------------------------------------------------------- contact bar */
.ap-contactbar__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ap-contactbar h4{
  font-family:var(--ap-font-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ap-muted);font-weight:600;margin-bottom:8px
}
.ap-contactbar p{margin:0;font-size:15.5px;color:var(--ap-ink)}

/* --------------------------------------------------------------- footer */
.ap-footer{background:var(--ap-bg-dark);color:#C2BDB6}
.ap-footer h4,.ap-footer h3{color:#fff}
.ap-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.ap-footer__logo img{max-height:60px;width:auto;margin-bottom:18px}
.ap-footer__about{font-size:15px;max-width:46ch}
.ap-footer__heading{
  font-family:var(--ap-font-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 16px
}
.ap-footer__links{list-style:none;margin:0;padding:0}
.ap-footer__links li{padding:7px 0}
.ap-footer__links a{color:#C2BDB6;font-size:15px}
.ap-footer__links a:hover{color:var(--ap-gold);text-decoration:none}
.ap-social{display:flex;gap:14px;margin-top:18px}
.ap-social a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.25s
}
.ap-social a:hover{background:var(--ap-gold);border-color:var(--ap-gold);text-decoration:none}
.ap-social svg{width:16px;height:16px;fill:currentColor}
.ap-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:#9A948C
}

/* --------------------------------------------------------------- responsive */
@media(max-width:1024px){
  .ap-services__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-footer__grid{grid-template-columns:1fr 1fr}
}

@media(max-width:880px){
  /* Fallback only — the widget's Tablet/Mobile "Column Ratio" control overrides this. */
  .ap-hero__grid,.ap-intro__grid,.ap-practice__grid,.ap-why{grid-template-columns:1fr}
  .ap-practice__head--sticky{position:static}
  .ap-intro__aside{border-left:0;border-top:2px solid var(--ap-gold);padding:20px 0 0}

  /* mobile nav */
  .ap-burger{display:flex}
  .ap-header__inner{flex-wrap:wrap}
  .ap-nav{
    display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:0;order:3;border-top:1px solid var(--ap-line);margin-top:16px;padding-top:8px
  }
  .ap-nav.is-open{display:flex}
  .ap-nav li{width:100%}
  .ap-nav a{display:block;padding:13px 0;width:100%}
  .ap-header__actions .ap-btn{display:none}
}

@media(max-width:640px){
  /* Fallback only — no !important, so the widget's Mobile "Columns" control wins. */
  .ap-services__list,.ap-process,.ap-contactbar__grid,.ap-footer__grid{grid-template-columns:1fr}
  .ap-btn{width:100%;justify-content:center}
  .ap-btn-group{flex-direction:column}
  .ap-hero__card{padding:24px}
  .ap-faq summary{font-size:18px;padding-right:36px}
  .ap-footer__bottom{flex-direction:column}
}

/* Safety net: below 420px nothing should ever sit side-by-side, regardless of
   widget settings. Kept in its own query so it never fights the Mobile controls
   at normal phone widths (421–640px). */
@media(max-width:420px){
  .ap-hero__grid,.ap-intro__grid,.ap-practice__grid,.ap-why,
  .ap-services__list,.ap-process,.ap-contactbar__grid,.ap-footer__grid{
    grid-template-columns:1fr !important
  }
  .ap-wrap{padding-left:0;padding-right:0}
}

@media(prefers-reduced-motion:reduce){
  .ap-section *{animation:none !important;transition:none !important}
}