/* ==========================================================================
   State Core Technology — site theme
   A dark-forward, bento-grid inspired theme. Brand + accent colors come
   from /admin (Settings) as --brand / --accent. Everything else lives here
   so the look stays consistent site-wide. All component class names below
   are unchanged from the base template, so the admin editor keeps working.
   ========================================================================== */

:root{
  --ink:#05060D; --ink-2:#0A0C18; --paper:#F7F8FC; --tint:#EEF0FA; --white:#fff;
  --muted:#5B5E7E; --muted-dark:#A7ABD6; --line:#E1E4F3; --line-dark:rgba(255,255,255,.12);
  --font-display:"Space Grotesk",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif;

  --radius-sm:10px; --radius:18px; --radius-lg:26px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 2px 10px rgba(5,6,13,.06);
  --shadow-md:0 16px 38px -14px rgba(5,6,13,.22);
  --shadow-lg:0 34px 68px -22px rgba(5,6,13,.32);

  /* derived shades of the admin-chosen brand / accent colors */
  --brand-dark:color-mix(in srgb, var(--brand) 80%, black);
  --brand-light:color-mix(in srgb, var(--brand) 65%, white);
  --brand-soft:color-mix(in srgb, var(--brand) 10%, white);
  --brand-line:color-mix(in srgb, var(--brand) 30%, var(--line));
  --accent-dark:color-mix(in srgb, var(--accent) 72%, black);
  --accent-light:color-mix(in srgb, var(--accent) 55%, white);
  --accent-soft:color-mix(in srgb, var(--accent) 16%, white);
  --glow:0 20px 44px -14px color-mix(in srgb, var(--brand) 60%, transparent);
  --glow-accent:0 20px 44px -14px color-mix(in srgb, var(--accent) 60%, transparent);
  --mesh:
    radial-gradient(60% 60% at 14% 8%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 60%),
    radial-gradient(50% 55% at 88% 18%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(65% 55% at 50% 100%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 65%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.68 var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:color-mix(in srgb, var(--brand) 35%, transparent);color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;margin:0;letter-spacing:-.035em}
h1{font-size:clamp(2.6rem,5.4vw + 1rem,4.6rem);font-weight:700}
h2,.sec__head h1{font-size:clamp(1.9rem,2.6vw + 1rem,2.9rem);font-weight:700}
h3{font-size:1.26rem;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.wrap{width:min(1220px,100% - 2.5rem);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 2.5rem)}

/* subtle grain so flat colour blocks don't look sterile */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------- */
/* buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.6rem;border-radius:999px;
  font-weight:600;text-decoration:none;border:2px solid transparent;font-size:.98rem;cursor:pointer;
  font-family:var(--font-display);letter-spacing:-.01em;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
.btn::after{content:"\2192";display:inline-block;transition:transform .25s var(--ease);font-weight:700}
.btn--ghost::after,.btn--dark::after{opacity:.85}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--accent) 150%);color:#fff;box-shadow:var(--glow)}
.btn--primary:hover{box-shadow:0 26px 52px -14px color-mix(in srgb, var(--brand) 70%, transparent)}
.btn--accent{background:var(--accent);color:var(--ink);box-shadow:0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn--accent:hover{background:var(--accent-dark);color:#fff}
.btn--ghost{border-color:color-mix(in srgb, var(--ink) 22%, transparent);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-md)}
.sec--dark .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.sec--dark .btn--ghost:hover{background:#fff;color:var(--ink)}

/* ---------------------------------------------------------------------- */
/* header                                                                  */
/* ---------------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:200;background:color-mix(in srgb, var(--paper) 72%, transparent);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid transparent;transition:box-shadow .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.top--scrolled{border-bottom-color:var(--line);box-shadow:0 8px 28px -20px rgba(5,6,13,.4)}
.top__in{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.logo img{--logo-h:100px;height:var(--logo-h);width:auto;border-radius:0;margin-bottom:calc(76px - var(--logo-h))}
/* logo image already contains the site name, so hide the duplicate text next to it
   (kept for screen readers only). Without an uploaded logo the text still shows. */
.logo img+span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo__mark{width:26px;height:26px;border-radius:9px 9px 9px 3px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 6px 16px -4px color-mix(in srgb, var(--brand) 65%, transparent);position:relative}
.logo__mark::after{content:"";position:absolute;inset:5px;border-radius:5px 5px 5px 1px;background:color-mix(in srgb, var(--ink) 88%, transparent)}
.logo__mark+span{margin-left:4px}
.nav{display:flex;align-items:center;gap:.4rem}
.nav a:not(.btn){position:relative;text-decoration:none;font-weight:600;padding:.55rem .95rem;border-radius:999px;color:var(--ink);transition:background-color .2s var(--ease),color .2s}
.nav a:not(.btn):hover{background:color-mix(in srgb, var(--brand) 8%, transparent)}
.nav a:not(.btn)[aria-current]{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark))}
.nav .btn{margin-left:.6rem}
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:8px;padding:.4rem .9rem;font:600 .95rem var(--font-body);color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s}
.burger:hover{background:var(--ink);color:#fff}
.nav-backdrop{display:none}

/* ---------------------------------------------------------------------- */
/* hero — dark aurora canvas                                               */
/* ---------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(140% 100% at 50% -10%,#171A34,var(--ink) 55%);border-bottom:1px solid rgba(255,255,255,.06);color:#fff}
.hero::before{content:"";position:absolute;inset:-10% -10% auto -10%;height:130%;background:var(--mesh);opacity:.55;filter:blur(10px);z-index:0;pointer-events:none;animation:auroraDrift 22s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%)}
@keyframes auroraDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:3.5rem;align-items:center;padding:6.5rem 0 4rem}
.hero__copy .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:600 .8rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.4rem .9rem .4rem .7rem;border-radius:999px;margin-bottom:1.4rem;backdrop-filter:blur(6px)}
.hero__copy .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.hero__copy h1{color:transparent;background:linear-gradient(105deg,#fff 42%,var(--brand-light) 78%,var(--accent-light) 105%);-webkit-background-clip:text;background-clip:text}
.lead{font-size:1.22rem;color:#B9BCE0;max-width:52ch;margin:1.4rem 0 2rem}
.btns{display:flex;flex-wrap:wrap;gap:.9rem}
.hero .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn--ghost:hover{background:#fff;color:var(--ink)}

/* floating "browser" mock-up — a light UI screenshot popping off the dark hero */
.browser{position:relative;background:var(--white);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);box-shadow:0 40px 90px -24px rgba(0,0,0,.55);overflow:hidden;transform:rotate(.6deg)}
.browser::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.55),transparent 45%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.browser__bar{display:flex;align-items:center;gap:6px;padding:.9rem 1rem;border-bottom:1px solid var(--line);background:var(--tint)}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:#E15C4F}
.browser__bar i:nth-child(2){background:#EFB93D}
.browser__bar i:nth-child(3){background:#3FB56D}
.browser__bar span{margin-left:.6rem;flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.25rem .7rem;font-size:.8rem;color:var(--muted)}
.browser__body{padding:1.7rem;min-height:270px;position:relative;color:var(--ink)}
.browser__body img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;display:block}
.sk{height:14px;border-radius:7px;background:var(--tint);margin-bottom:.9rem;width:100%;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:shimmer 2.4s infinite}
.sk--h{height:38px;width:72%;background:linear-gradient(135deg,var(--brand),var(--accent));opacity:.95}
.sk--h::after{display:none}
.sk--s{width:48%}
@keyframes shimmer{to{transform:translateX(160%)}}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem}
.chips span{border:1.5px solid var(--line);border-radius:999px;padding:.32rem 1rem;font-size:.85rem;font-weight:600;font-family:var(--font-display);background:var(--paper);color:var(--ink);transition:border-color .2s,transform .2s}
.chips span:hover{border-color:var(--brand);transform:translateY(-2px)}
.browser{margin-right:.5rem}
.hero__in .browser{position:relative}
.hero__in .browser::after{
  content:"\2726";position:absolute;top:-20px;right:-16px;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 55%, var(--brand) 45%));
  display:grid;place-items:center;font-size:1.3rem;color:var(--ink);box-shadow:0 16px 30px -10px rgba(0,0,0,.45);
  transform:rotate(8deg);z-index:2;
}

/* ---------------------------------------------------------------------- */
/* generic section shell                                                   */
/* ---------------------------------------------------------------------- */
.sec{padding:6rem 0;position:relative}
.sec--light{background:var(--paper)}
.sec--tint{background:var(--tint)}
.sec--dark{position:relative;overflow:hidden;background:radial-gradient(120% 130% at 15% 0%,#151832,var(--ink) 60%);color:#fff}
.sec--dark::before{content:"";position:absolute;inset:0;background:var(--mesh);opacity:.32;pointer-events:none}
.sec--dark>.wrap{position:relative;z-index:1}
.sec--dark .sec__head p,.sec--dark .prose{color:var(--muted-dark)}
.sec--dark .sec__head .eyebrow{color:var(--accent-light)}
.sec__head{max-width:640px;margin-bottom:3rem}
.sec__head .eyebrow{display:inline-block;font:700 .8rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:.7rem}
.sec__head p{color:var(--muted);font-size:1.18rem;margin:1rem 0 0}

/* scroll-reveal (progressive enhancement, see site.js) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------------------- */
/* cards (services / features) — bento-style grid                          */
/* ---------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.35rem;grid-auto-flow:dense}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,color-mix(in srgb, var(--brand) 6%, transparent),transparent 55%);pointer-events:none;opacity:0;transition:opacity .3s}
.card:hover{border-color:transparent;box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.card:hover::after{opacity:1}
.card__icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb, var(--brand) 45%, var(--accent) 55%));color:#fff;margin-bottom:1.3rem;box-shadow:0 12px 26px -10px color-mix(in srgb, var(--brand) 65%, transparent);transition:transform .3s var(--ease)}
.card:hover .card__icon{transform:rotate(-6deg) scale(1.08)}
.card h3{margin-top:.2rem}
.card p{color:var(--muted);margin:.65rem 0 0}
.card__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.2rem;font-weight:700;font-family:var(--font-display);color:var(--brand-dark);text-underline-offset:4px;position:relative;z-index:1}
.card__link::after{content:"\2192";transition:transform .2s var(--ease)}
.card__link:hover::after{transform:translateX(3px)}
/* bento rhythm on wide screens: every 3rd tile of a row of 6 gets more room */
@media (min-width:860px){
  .grid:has(.card:nth-child(6)):not(:has(.card:nth-child(7))) .card:nth-child(3n+1){grid-column:span 2}
}

/* ---------------------------------------------------------------------- */
/* text + image split                                                       */
/* ---------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.8rem;align-items:center}
.split--one{grid-template-columns:minmax(0,760px)}
.split__img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.prose p{max-width:62ch;color:inherit}
.sec--tint .prose p,.sec--light .prose p{color:var(--muted)}

/* ---------------------------------------------------------------------- */
/* stats strip                                                             */
/* ---------------------------------------------------------------------- */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stats li{padding:.4rem 1.8rem;border-left:1px solid rgba(255,255,255,.14)}
.stats li:first-child{border-left:0;padding-left:0}
.stats strong{display:block;font:700 clamp(2.6rem,5vw,4rem)/1 var(--font-display);background:linear-gradient(120deg,#fff,var(--accent-light));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.03em}
.stats span{color:var(--muted-dark);font-weight:500}

/* ---------------------------------------------------------------------- */
/* process / steps                                                         */
/* ---------------------------------------------------------------------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.8rem;position:relative}
.steps li{counter-increment:s;padding-top:1.3rem;position:relative}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font:700 1.05rem var(--font-display);margin-bottom:1.1rem;box-shadow:0 10px 22px -8px color-mix(in srgb, var(--brand) 60%, transparent)}
.steps li::after{content:"";position:absolute;top:20px;left:40px;width:calc(100% - 40px);height:2px;background:linear-gradient(90deg,var(--brand-line),transparent);z-index:-1}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:.25rem}
.steps p{color:var(--muted);margin:.5rem 0 0}
.sec--dark .steps p{color:var(--muted-dark)}
.sec--dark .steps li::after{background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
@media (max-width:860px){.steps li::after{display:none}}

/* ---------------------------------------------------------------------- */
/* portfolio                                                               */
/* ---------------------------------------------------------------------- */
.proj{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.proj:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.proj .ed-img-wrap{overflow:hidden;position:relative}
.proj .ed-img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,color-mix(in srgb, var(--brand) 35%, transparent),transparent 55%);mix-blend-mode:multiply;opacity:.55;pointer-events:none;transition:opacity .35s}
.proj:hover .ed-img-wrap::after{opacity:.2}
.proj>img,.proj .ed-img-wrap img,.proj__ph{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj:hover img{transform:scale(1.07)}
.proj__ph{
  display:grid;place-items:center;position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, hsl(var(--h) 85% 62% / .9), transparent 55%),
    radial-gradient(circle at 80% 30%, hsl(calc(var(--h) + 40) 80% 55% / .85), transparent 55%),
    radial-gradient(circle at 50% 90%, hsl(calc(var(--h) + 90) 70% 45% / .9), transparent 60%),
    linear-gradient(135deg,hsl(var(--h) 60% 30%),hsl(calc(var(--h) + 60) 55% 20%));
}
.proj__ph::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.proj__ph span{position:relative;font:700 4rem var(--font-display);opacity:.92;text-shadow:0 6px 20px rgba(0,0,0,.25)}
.proj__body{padding:1.5rem 1.7rem 1.8rem}
.proj__body p{color:var(--muted);margin:.6rem 0 0}
.sec--dark .proj__body p{color:var(--muted)}
.pill{display:inline-block;font-size:.78rem;font-weight:700;font-family:var(--font-display);letter-spacing:.02em;padding:.28rem .85rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);margin-bottom:.85rem}
.more{margin-top:2.6rem}

/* ---------------------------------------------------------------------- */
/* testimonials                                                            */
/* ---------------------------------------------------------------------- */
.quote{margin:0;background:var(--white);border-radius:var(--radius);padding:2.2rem;border:1px solid var(--line);transition:box-shadow .3s,transform .3s var(--ease);position:relative}
.quote:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.quote blockquote{margin:0 0 1.5rem;font-size:1.12rem;line-height:1.58}
.quote blockquote::before{content:"\201C";display:block;font:700 3.8rem/.4 var(--font-display);background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.7rem}
.quote figcaption{display:flex;align-items:center;gap:.9rem}
.quote__avatar{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font:700 1.05rem var(--font-display);
  background:linear-gradient(135deg,hsl(var(--h) 75% 55%),hsl(calc(var(--h) + 45) 70% 42%));
}
.quote__who{display:flex;flex-direction:column}
.quote figcaption strong{display:block}
.quote figcaption span{color:var(--muted);font-size:.92rem}

/* ---------------------------------------------------------------------- */
/* faq                                                                     */
/* ---------------------------------------------------------------------- */
.faq{border-bottom:1px solid var(--line);padding:1.4rem 0}
.sec--dark .faq{border-bottom-color:rgba(255,255,255,.12)}
.faq summary{cursor:pointer;font:700 1.15rem var(--font-display);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.7rem;line-height:1;flex:none;width:1.2rem;text-align:center;transition:transform .25s var(--ease);color:var(--brand)}
.sec--dark .faq summary::after{color:var(--accent-light)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:.9rem 0 0;max-width:70ch}
.sec--dark .faq p{color:var(--muted-dark)}

/* ---------------------------------------------------------------------- */
/* cta banner                                                              */
/* ---------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--accent),color-mix(in srgb, var(--accent) 65%, var(--brand) 35%));padding:4.4rem 0}
.cta::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);top:-180px;right:-90px;pointer-events:none}
.cta::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);bottom:-140px;left:8%;pointer-events:none}
.cta__in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta h2{color:var(--ink)}
.cta p{margin:.6rem 0 0;font-size:1.15rem;color:color-mix(in srgb, var(--ink) 78%, transparent)}

/* ---------------------------------------------------------------------- */
/* contact                                                                 */
/* ---------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3.8rem;align-items:start}
.info{list-style:none;padding:0;margin:2.3rem 0 0}
.info li{padding:1.05rem 0;border-top:1px solid var(--line);display:flex;gap:1.5rem;align-items:baseline}
.info span{width:90px;color:var(--muted);flex:none;font-weight:600}
.info a{font-weight:700;color:var(--brand-dark);text-decoration:none}
.info a:hover{text-decoration:underline}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow-lg)}
.form label{display:block;font-weight:700;font-size:.92rem;margin-bottom:1.15rem}
.form input,.form textarea{display:block;width:100%;margin-top:.4rem;padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:400 1rem var(--font-body);background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent)}
.form .btn{width:100%;justify-content:center}
.hp{position:absolute!important;left:-9999px;height:0;width:0}
.flash{padding:.85rem 1.15rem;border-radius:var(--radius-sm);font-weight:600}
.flash--ok{background:#DDF6E6;color:#0E5A2B}
.flash--error{background:#FDE3E3;color:#8A1B1B}

/* ---------------------------------------------------------------------- */
/* footer                                                                  */
/* ---------------------------------------------------------------------- */
.foot{position:relative;background:var(--ink);color:#B9BCE0;padding:4.5rem 0 1.8rem;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),var(--accent),transparent)}
.foot::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:60%;background:var(--mesh);opacity:.16;pointer-events:none}
.foot__in{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.foot__name{font:700 1.55rem var(--font-display);color:#fff}
.foot p{margin-top:.5rem}
.foot nav,.foot__contact{display:flex;flex-direction:column;gap:.6rem}
.foot a{text-decoration:none;transition:color .15s}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__legal{position:relative;z-index:1;margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem}

/* ---------------------------------------------------------------------- */
/* responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width:860px){
  .hero__in,.split,.contact,.foot__in{grid-template-columns:1fr}
  .hero__in{padding:3.4rem 0}
  .hero .browser{transform:none;order:-1}
  .sec{padding:4rem 0}
  .burger{display:block}
  .nav{
    display:flex;position:fixed;top:0;right:0;height:100vh;width:min(320px,84vw);z-index:210;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;
    background:var(--paper);padding:6.5rem 1.75rem 2rem;border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:var(--shadow-lg);
  }
  .nav.is-open{transform:translateX(0)}
  .nav a:not(.btn){font-size:1.05rem;width:100%}
  .nav .btn{width:100%;justify-content:center;order:99;margin-left:0}
  body.nav-open{overflow:hidden}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:205;background:rgba(5,6,13,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .stats li{border-left:0;padding-left:0;padding-bottom:1.3rem}
  .card:nth-child(3n+1){grid-column:auto!important}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
/* Photo background for "cards" section boxes (added) */
.card--photo{padding:0;color:#fff}
.card--photo .card__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:var(--tint);transition:transform .4s var(--ease)}
.card--photo:hover .card__bg{transform:scale(1.06)}
.card--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(5,6,13,.15) 0%, rgba(5,6,13,.55) 55%, rgba(5,6,13,.92) 100%)}
.card--photo .card__body{position:relative;z-index:2;padding:2rem}
.card--photo .card__icon{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);box-shadow:none}
.card--photo h3{color:#fff}
.card--photo p{color:rgba(255,255,255,.82)}
.card--photo .card__link{color:#fff}

/* Portfolio box with overlay switched off: image sits on top (plain, not covered by a
   dark caption gradient), title/text render normally below it - like a standard photo card. */
.card--photo-plain{color:var(--ink)}
.card--photo-plain .card__bg{position:static;width:100%;aspect-ratio:16/10;border-radius:var(--radius) var(--radius) 0 0;box-shadow:none}
.card--photo-plain:hover .card__bg{transform:none}
.card--photo-plain::before{display:none}
.card--photo-plain .card__body{position:static;padding:1.5rem 2rem 2rem}
.card--photo-plain .card__icon{background:var(--tint);backdrop-filter:none;box-shadow:none}
.card--photo-plain h3{color:var(--ink)}
.card--photo-plain p{color:var(--muted)}
.card--photo-plain .card__link{color:var(--brand)}

/* When a box/section is given a custom height (px) that's shorter than its content,
   let it scroll inside itself instead of silently clipping the text. */
.ed-boxlist [style*="height"]{overflow:auto}