/* =========================================================
   kentseo.io — base.css
   The small set of global rules every page sits on.
   It recreates the defaults the old WordPress theme (Astra)
   and Elementor used to inject, so each page's own <style>
   block renders exactly as it did on WordPress.
   Page-specific design lives inside each page, not here.
   ========================================================= */

:root{
  --ks-text:#76787f;      /* default body text (old theme global) */
  --ks-heading:#26262c;   /* default heading + link colour */
  --ks-border:#e0e0e0;
}

/* ---- reset ---- */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;font-size:100%}
*,*::before,*::after{box-sizing:inherit}
address,blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{
  border:0;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}
body{margin:0;background:#fff;color:var(--ks-text);overflow-x:hidden;
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:16px;line-height:1.8571428571;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
b,strong{font-weight:700}
cite,dfn,em,i{font-style:italic}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}sub{bottom:-.25em}
img{border:0;height:auto;max-width:100%;vertical-align:middle}
iframe,embed,object{max-width:100%}
hr{box-sizing:content-box;background-color:#ccc;border:0;height:1px;margin-bottom:1.5em}
pre{overflow:auto}
p{margin-bottom:1em}
ol,ul{margin:0 0 1.5em 3em}
ul{list-style:disc}ol{list-style:decimal}

/* ---- links ---- */
a{color:var(--ks-heading);background-color:transparent;text-decoration:none;transition:all .2s linear}
a:focus,a:hover,a:visited{text-decoration:none}

/* ---- headings ---- */
h1,h2,h3,h4,h5,h6{clear:both;font-family:'Sora',sans-serif;font-weight:700;color:var(--ks-heading);line-height:1.2em}
h1{font-size:80px;font-weight:800;line-height:1.4em}
h2{font-size:56px;font-weight:800;line-height:1.3em}
h3{font-size:40px;font-weight:800;line-height:1.3em}
h4{font-size:32px}
h5{font-size:24px}
h6{font-size:18px;line-height:1.25em}

/* ---- tables ---- */
table{border-collapse:separate;border-spacing:0;border:1px solid var(--ks-border);border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}
td,th{border:1px solid var(--ks-border);border-width:0 1px 1px 0;padding:.7em 1em}
th{font-weight:600}

/* ---- form controls + buttons ---- */
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button,input,select,textarea{font-family:'Montserrat',sans-serif;font-weight:400;font-size:16px;vertical-align:baseline}
button,input{line-height:normal}
button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button,input[type=button],input[type=submit],input[type=reset]{
  border:1px solid #f6f5f5;color:#f6f5f5;background-color:rgba(41,81,214,0);
  padding:15px 23px;font-family:inherit;font-weight:700;font-size:13px;line-height:1em;
  text-transform:uppercase;letter-spacing:2px;border-radius:0}
button:focus,button:hover{color:#f3f4f6;background-color:#f6f5f5;border-color:#2ccab9}

/* ---- page shell (replaces the Elementor section wrapper) ---- */
.ks-page{padding:10px;display:flex;flex-direction:column}
.ks-widget{position:relative;width:100%;max-width:100%;min-width:0}
.ks-page--dark{background:#000}
.ks-page--white>.ks-widget{background:#fff}

/* ---- rules WordPress applied *inside* page content ----
   These selectors are deliberately one notch more specific than a single
   class, exactly like the WordPress originals (.entry-content p,
   .elementor img, body .elementor hr …). They out-rank a page's own
   single-class rules, which is how the live site has always rendered.
   Change them and every page shifts — edit page CSS instead. */
.ks-widget *{box-sizing:border-box}
.ks-widget a{box-shadow:none;text-decoration:none}
.ks-widget p{margin-bottom:1em}
.ks-widget img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%}
.ks-widget iframe{border:none;line-height:1;margin:0;max-width:100%;width:100%}
body .ks-widget hr{background-color:#ccc;margin:0}
.ks-widget :where(h1,h2,h3,h4,h5,h6){font-family:'Sora',sans-serif;font-weight:700;line-height:1.2em;color:var(--ks-heading);margin-bottom:20px}
.ks-widget :where(h1){font-size:80px;font-weight:800;line-height:1.4em}
.ks-widget :where(h2){font-size:56px;font-weight:800;line-height:1.3em}
@media (max-width:921px){.ks-widget :where(h1){font-size:64px}.ks-widget :where(h2){font-size:40px}}
@media (max-width:544px){.ks-widget :where(h1){font-size:34px}.ks-widget :where(h2){font-size:28px}}

/* ---- light / dark theme (home, about, case-study index) ----
   Saved choice lives in localStorage "kl-theme"; each page's <head> applies it before paint.
   Page-specific dark colours live in each page's "DARK THEME" block. */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#0a0a0a}
html[data-theme="dark"] .ks-page--white>.ks-widget{background:#0a0a0a}
.ks-theme-anim,.ks-theme-anim *,.ks-theme-anim *::before,.ks-theme-anim *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,box-shadow .35s ease!important}

/* sidebar switch: sun | moon */
.ks-theme{display:inline-flex;background:#f5f5f5;border:1px solid #eee;border-radius:100px;padding:3px;gap:2px}
.ks-theme button{all:unset;box-sizing:border-box;cursor:pointer;border-radius:100px;padding:5px 9px;color:#b5b5b5;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,box-shadow .15s}
.ks-theme button svg{width:12px;height:12px;display:block}
.ks-theme button:hover{color:#666}
.ks-theme button.active{background:#fff;color:#111;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.ks-theme button:focus-visible{outline:2px solid #888;outline-offset:1px}
html[data-theme="dark"] .ks-theme{background:#171717;border-color:#262626}
html[data-theme="dark"] .ks-theme button{color:#5c5c5c}
html[data-theme="dark"] .ks-theme button:hover{color:#a6a6a6}
html[data-theme="dark"] .ks-theme button.active{background:#2a2a2a;color:#f2f2f2;box-shadow:none}

/* mobile header: one-tap icon */
.ks-mh-right{display:flex;align-items:center;gap:6px}
.ks-theme-flip{all:unset;box-sizing:border-box;cursor:pointer;width:34px;height:34px;margin:-6px 0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:#444;-webkit-tap-highlight-color:transparent}
.ks-theme-flip svg{width:17px;height:17px;display:block}
.ks-theme-flip:hover,.ks-theme-flip:focus{background:transparent;border:0;color:#444}
.ks-theme-flip:active{background:rgba(0,0,0,.06)}
.ks-theme-flip .ks-sun{display:none}
html[data-theme="dark"] .ks-theme-flip,html[data-theme="dark"] .ks-theme-flip:hover,html[data-theme="dark"] .ks-theme-flip:focus{color:#d4d4d4}
html[data-theme="dark"] .ks-theme-flip:active{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .ks-theme-flip .ks-sun{display:block}
html[data-theme="dark"] .ks-theme-flip .ks-moon{display:none}

/* KENTSEO wordmark: dark text → light text, colours kept */
html[data-theme="dark"] img.ks-logo{filter:invert(1) hue-rotate(180deg) brightness(1.08)}

/* ---- responsive defaults ---- */
@media (max-width:921px){
  h1{font-size:64px}h2{font-size:40px}h3{font-size:32px}h4{font-size:24px}h5{font-size:20px}h6{font-size:17px}
  button,input[type=button],input[type=submit],input[type=reset]{padding:14px 22px;font-size:12px}
}
@media (max-width:544px){
  body,button,input,select,textarea{font-size:15px}
  h1{font-size:34px}h2{font-size:28px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
  button,input[type=button],input[type=submit],input[type=reset]{padding:13px 21px;font-size:11px}
}