/* =========================================================================
   Sleek Studio — refinement layer (v2.1.0)
   Loads AFTER style.css. Nothing here is required for the site to work:
   delete the one enqueue line in functions.php and the site reverts exactly.

   Purpose: the base theme styles its own hand-built front page well, but the
   52 imported pages arrive as old utility markup. This layer owns that
   content region so type, colour, rhythm and contrast come from one system
   instead of ~40 leftover hex values fighting a dark palette.
   ========================================================================= */

:root{
  /* ink scale — every text token on a dark surface resolves here */
  --ink-1:#f2f0ea; --ink-2:#c8c6bf; --ink-3:#9b9c98; --ink-4:#7c7e7a;
  --gold-soft:rgba(192,160,106,.14);
  --hairline:rgba(239,237,231,.13);
  /* spacing + type scale, one source of truth */
  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:54px; --s-6:88px; --s-7:132px;
  --flow:clamp(16px,1.6vw,24px);
  --measure:70ch;
  --r:2px;
}

/* ---------------------------------------------------------------- contrast
   The bug: imported sections carried text-[#17211E] / text-[#6D7D75] — near
   black on #08090a. Neutralise by inheritance, then re-establish hierarchy. */
.source-content,
.source-content p,
.source-content li,
.source-content span,
.source-content td,
.source-content th,
.source-content dt,
.source-content dd,
.source-content label,
.source-content blockquote{color:var(--ink-2)}
.source-content strong,
.source-content b{color:var(--ink-1);font-weight:600}
.source-content small{color:var(--ink-3);font-size:.86em;letter-spacing:.01em}
.source-content em{font-style:italic;color:var(--ink-1)}

/* ------------------------------------------------------------- page hero
   Fixed header is 74px; heroes were starting under it on short viewports. */
.page-hero{padding:clamp(140px,17vh,196px) 0 clamp(64px,7vw,96px);position:relative;overflow:hidden}
.page-hero:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% -10%,rgba(192,160,106,.10),transparent 58%),
    linear-gradient(90deg,transparent 0 49.6%,var(--hairline) 49.6% 50.4%,transparent 50.4%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{margin-bottom:20px;color:var(--gold);font:10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.page-hero h1{max-width:17ch;font-weight:600;text-wrap:balance}
.page-hero p{max-width:60ch;margin:24px 0 0;color:var(--ink-2);font-size:clamp(15px,1.3vw,18px);line-height:1.72;text-wrap:pretty}

/* ------------------------------------------------------- section rhythm
   Alternate tone via overlay rather than a hard background swap, and keep
   one consistent vertical cadence across every imported page. */
.source-content>section{padding:clamp(76px,8vw,124px) max(28px,calc((100vw - var(--max))/2));border-bottom:1px solid var(--hairline)}
.source-content>section.sleek-sec{background:var(--black)}
.source-content>section.sleek-sec.is-alt{background:#0c0d0e}
.source-content .container{width:min(1140px,100%);padding-inline:clamp(20px,4vw,36px)}

/* ------------------------------------------------------------ typography
   Editorial scale: tight, large display heads over a generous reading measure. */
.source-content h2{max-width:24ch;margin:0 0 20px;font-weight:600;text-wrap:balance;letter-spacing:-.055em}
.source-content h3{max-width:32ch;color:var(--ink-1);margin:0 0 12px;text-wrap:balance}
.source-content h4,.source-content h5{color:var(--ink-1);letter-spacing:-.01em;margin:0 0 10px}
.source-content p{max-width:var(--measure);margin:0 0 1.05em;line-height:1.78;font-size:clamp(15px,1.05vw,16.5px);text-wrap:pretty}
.source-content p:last-child{margin-bottom:0}
/* a lead paragraph right after a heading earns more air */
.source-content h2+p,.source-content .sleek-sec>p:first-child{max-width:66ch;font-size:clamp(16px,1.25vw,18.5px);color:var(--ink-2)}

/* lists: editorial markers instead of browser defaults */
.source-content ul,.source-content ol{margin:0 0 1.15em;padding-left:1.3em;max-width:var(--measure)}
.source-content li{margin-bottom:.55em;line-height:1.72;padding-left:.15em}
.source-content ul{list-style:none;padding-left:0}
.source-content ul>li{position:relative;padding-left:1.35em}
.source-content ul>li:before{content:'';position:absolute;left:.15em;top:.72em;width:7px;height:1px;background:var(--gold)}
.source-content ul ul>li:before{background:var(--ink-4)}
.source-content ol{counter-reset:sleek-ol;list-style:none;padding-left:0}
.source-content ol>li{counter-increment:sleek-ol;position:relative;padding-left:2.3em}
.source-content ol>li:before{content:counter(sleek-ol,decimal-leading-zero);position:absolute;left:0;top:.05em;font:11px/1.6 var(--mono);color:var(--green)}

/* links: never the old pink; underline on content links only */
.source-content a{color:var(--ink-1);text-decoration:none;border-bottom:1px solid rgba(192,160,106,.42);transition:color .2s,border-color .2s}
.source-content a:hover,.source-content a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.source-content a:has(img){border-bottom:0}

/* --------------------------------------------------------------- buttons
   Legacy btn-primary / px-8 links adopt the theme control, incl. focus ring. */
.source-content .btn-primary,
.source-content a[class*="btn-"],
.source-content a[class*="px-8"]{
  display:inline-flex;align-items:center;gap:11px;margin:14px 12px 0 0;padding:14px 20px;
  border:1px solid var(--gold);border-bottom:1px solid var(--gold);border-radius:var(--r);
  font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  background:transparent;transition:background .22s,color .22s,transform .22s;
}
.source-content .btn-primary:hover,
.source-content a[class*="btn-"]:hover,
.source-content a[class*="px-8"]:hover{background:var(--gold);color:var(--black);transform:translateY(-1px)}
.source-content .btn-primary:active{transform:none}

/* --------------------------------------------------------------- surfaces */
.source-content figure{max-width:940px;margin:36px 0}
.source-content img{width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--r);background:#0d0e0e}
.source-content figcaption{margin-top:12px;color:var(--ink-3);font:10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.source-content blockquote{
  margin:38px 0;padding:26px 32px;border-left:2px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  background:linear-gradient(90deg,var(--gold-soft),transparent 70%);
  font:italic clamp(21px,2.1vw,28px)/1.28 var(--serif);color:var(--ink-1);
}
.source-content blockquote p{font-size:inherit;color:inherit;margin:0 0 .4em}
.source-content blockquote p:last-child{margin:0}
.source-content code{font:12px/1.6 var(--mono);color:var(--gold);background:rgba(192,160,106,.09);padding:2px 6px;border-radius:var(--r)}
.source-content hr{border:0;border-top:1px solid var(--hairline);margin:44px 0}

/* card-ish boxes: the imported pages use bordered boxes as feature cards */
.source-content [class*="rounded"],.source-content [class*="border"],.source-content [class*="shadow"]{border-radius:var(--r)}
.source-content [class*="grid"]>div,
.source-content [class*="flex"]>div{min-width:0}
.source-content [class*="grid"]>div>*,
.source-content [class*="grid-cols"]>div{padding:clamp(20px,2.4vw,32px)}
.source-content [class*="grid"]>div:has(>h3),
.source-content [class*="grid-cols"]>div:has(>h3){
  border:1px solid var(--hairline);border-radius:var(--r);background:#101113;
  transition:border-color .25s,transform .25s,background .25s;
}
.source-content [class*="grid"]>div:has(>h3):hover,
.source-content [class*="grid-cols"]>div:has(>h3):hover{border-color:rgba(192,160,106,.45);background:#131416;transform:translateY(-2px)}
.source-content [class*="grid-cols"]>h3,
.source-content [class*="grid"]>h3{margin-top:0}

/* grids collapse themselves — no more orphaned 3rd card in a 2-col row */
.source-content [class*="grid-cols-2"],.source-content [class*="grid-cols-3"],.source-content [class*="grid-cols-4"]{display:grid;gap:20px;align-items:start}
.source-content [class*="grid-cols-2"]{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.source-content [class*="grid-cols-3"],.source-content [class*="grid-cols-4"]{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.source-content [class*="items-center"]{align-items:center}
.source-content [class*="justify-between"]{justify-content:space-between}
.source-content [class*="text-center"]{text-align:center}
.source-content [class*="text-center"] p,
.source-content [class*="text-center"] h2,
.source-content [class*="text-center"] h3{margin-inline:auto}

/* ------------------------------------------------------- pricing + tables
   Old pages ship tables for package pricing; give them tabular figures. */
.source-content table{width:100%;max-width:100%;border-collapse:collapse;margin:34px 0;font-variant-numeric:tabular-nums}
.source-content caption{caption-side:bottom;margin-top:12px;color:var(--ink-3);font:10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left}
.source-content th,.source-content td{padding:15px 16px;border-bottom:1px solid var(--hairline);text-align:left;font-size:15px}
.source-content thead th{border-bottom:1px solid rgba(192,160,106,.5);color:var(--ink-1);font:10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.source-content tbody tr{transition:background .2s}
.source-content tbody tr:hover{background:rgba(239,237,231,.035)}
.source-content td:last-child,.source-content th:last-child{text-align:right;color:var(--ink-1)}
.source-content table a{white-space:nowrap}

/* form fields (quote / contact pages rendered through the_content) */
.source-content form label{color:var(--ink-1);font-size:13px;letter-spacing:.01em}
.source-content input,.source-content select,.source-content textarea{
  border-radius:var(--r);border-color:rgba(239,237,231,.22);transition:border-color .2s,box-shadow .2s;
}
.source-content input:hover,.source-content select:hover,.source-content textarea:hover{border-color:rgba(239,237,231,.4)}
.source-content input:focus,.source-content select:focus,.source-content textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.source-content input::placeholder,.source-content textarea::placeholder{color:var(--ink-4)}

/* ------------------------------------------------------------- utilities */
.source-content section[id],.source-content [id]{scroll-margin-top:104px}
.source-content>:last-child{margin-bottom:0}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

/* mobile: tighter cadence, single column, no horizontal bleed surprises */
@media(max-width:820px){
  .page-hero{padding:clamp(112px,22vh,140px) 0 56px}
  .page-hero:before{background:radial-gradient(140% 80% at 78% -12%,rgba(192,160,106,.09),transparent 60%)}
  .page-hero p{margin-top:18px}
  .source-content>section{padding:64px 20px}
  .source-content [class*="grid-cols"]>div,.source-content [class*="grid"]>div>*{padding:20px}
  .source-content table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .source-content blockquote{padding:20px 22px;margin:28px 0}
  .source-content .btn-primary,.source-content a[class*="btn-"],.source-content a[class*="px-8"]{display:flex;justify-content:center;margin-right:0}
}
@media(prefers-reduced-motion:reduce){
  .source-content *,.source-content *:before,.source-content *:after{transition-duration:.01ms!important;transform:none!important}
}
@media print{
  .site-header,.site-footer,.portal-shutter,.nav{display:none}
  body{background:#fff;color:#111}
  .source-content p,.source-content li{color:#222}
  .source-content>section{padding:18px 0;border-bottom:1px solid #ddd}
}