/* Demonstrative Innovations site styles. Palette and type from brand guide v1.1:
   Spectral (display), Plus Jakarta Sans (body); Ivory, Bone, Charcoal, Copper. */
:root{
  --ivory:#FAF7F2; --bone:#F0EBE2; --line:#E2DCD2; --charcoal:#1A1A18; --ink:#3A3A36;
  --muted:#6B6B6B; --soft:#C4BDB2; --copper:#B87340; --copper-dark:#A06530; --copper-light:#D4A872;
  --serif:'Spectral',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --wrap:1100px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--ivory);color:var(--charcoal);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden;}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--copper);}
a:hover{color:var(--copper-dark);}
::selection{background:var(--copper-light);color:var(--charcoal);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:var(--ivory);padding:10px 16px;z-index:100;}
.skip:focus{left:12px;top:12px;}

h1,h2,h3{font-family:var(--serif);color:var(--charcoal);text-wrap:balance;margin:0;}
h1{font-size:56px;font-weight:300;line-height:1.08;letter-spacing:-0.5px;}
h2{font-size:38px;font-weight:400;line-height:1.15;}
h3{font-size:22px;font-weight:500;line-height:1.3;}
p{margin:0 0 1em;}
.wrap{max-width:var(--wrap);margin:0 auto;}
.narrow{max-width:720px;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--copper);margin-bottom:12px;}
.lead{font-size:18px;font-weight:300;line-height:1.75;color:var(--ink);max-width:640px;}
.muted{color:var(--muted);}

/* sections */
.section{padding:88px 48px;}
.section--bone{background:var(--bone);border-top:1px solid var(--line);}
.section--dark{background:var(--charcoal);color:var(--soft);}
.section--dark h2,.section--dark h3{color:var(--ivory);}
.section--dark .eyebrow{color:var(--copper-light);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:40px;}
.section-head p{margin:12px 0 0;}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background:rgba(250,247,242,0.92);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);}
.nav__logo img{height:36px;width:auto;}
.nav__mark{display:none;}
.nav__links{display:flex;align-items:center;gap:32px;}
.nav__links a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;padding-bottom:2px;border-bottom:1.5px solid transparent;}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--charcoal);border-bottom-color:var(--copper);}
.nav__links a.nav__cta{font-size:12px;font-weight:600;letter-spacing:0.4px;color:var(--copper);border:1.5px solid var(--copper);padding:9px 18px;border-radius:4px;white-space:nowrap;}
.nav__links a.nav__cta:hover{background:var(--copper);color:#fff;}

/* buttons */
.btn{display:inline-block;padding:14px 30px;border-radius:4px;font-size:13.5px;font-weight:600;letter-spacing:0.3px;text-decoration:none;border:1.5px solid var(--copper);background:var(--copper);color:#fff;cursor:pointer;font-family:var(--sans);}
.btn:hover{background:var(--copper-dark);border-color:var(--copper-dark);color:#fff;}
.btn--ghost{background:transparent;color:var(--charcoal);border-color:var(--line);}
.btn--ghost:hover{background:transparent;color:var(--charcoal);border-color:var(--muted);}
.btn--light{background:transparent;color:var(--ivory);border-color:rgba(250,247,242,0.4);}
.btn--light:hover{background:transparent;color:var(--ivory);border-color:var(--ivory);}
.actions{display:flex;gap:14px;flex-wrap:wrap;}
.textlink{font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;}

/* hero: split layout, text on ivory beside a rendering (the renders sit on a light studio background) */
.hero{padding:72px 48px 80px;border-bottom:1px solid var(--line);}
.hero__inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.hero h1{font-size:60px;margin-bottom:18px;}
.hero h1 em{font-style:italic;color:var(--copper);font-weight:400;}
.hero__cred{font-family:var(--serif);font-size:21px;font-style:italic;font-weight:300;color:var(--ink);margin:0 0 20px;}
.hero__body{font-size:17px;font-weight:300;line-height:1.75;color:var(--ink);max-width:540px;margin:0 0 32px;}
.hero figure img{border-radius:12px;box-shadow:0 24px 60px rgba(26,26,24,0.12);}

/* page header (inner pages) */
.page-head{padding:80px 48px 56px;border-bottom:1px solid var(--line);}
.page-head h1{font-size:48px;margin-bottom:18px;max-width:860px;}

/* grids and cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
a.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.09);color:inherit;}
.card__img{aspect-ratio:4/3;background:var(--line);object-fit:cover;width:100%;}
.card__body{padding:18px 20px 22px;}
.card__body h3{font-size:19px;}
.card__body p{font-size:14.5px;font-weight:300;color:var(--ink);margin:10px 0 0;}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tag{font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--bone);color:var(--muted);}
.tag--accent{background:rgba(184,115,64,0.1);color:var(--copper);}

.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tile{background:#fff;padding:36px 34px;}
.tile::before{content:"";display:block;width:34px;height:2px;background:var(--copper);margin-bottom:18px;}
.tile h3{margin-bottom:10px;}
.tile p{font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink);margin:0;}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.pillars h3{margin-bottom:10px;}
.pillars p{font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink);margin:0;}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:step;}
.steps li{counter-increment:step;border-top:1.5px solid var(--copper);padding-top:18px;}
.steps li::before{content:"Step " counter(step);display:block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--copper);margin-bottom:8px;}
.steps h3{font-size:19px;margin-bottom:8px;}
.steps p{font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink);margin:0;}

/* figures */
figure{margin:0;}
figcaption{font-size:13px;color:var(--muted);line-height:1.5;margin-top:10px;}
.section--dark figcaption{color:var(--soft);}
.figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.figure-pair img,.figure-grid img,.figure-wide img{border-radius:8px;background:var(--line);}
.figure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.figure-wide{margin:40px 0;}

/* case study article */
.case-hero{padding:0 48px;}
.case-hero figure{max-width:var(--wrap);margin:0 auto;}
.case-hero img{border-radius:10px;}
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;padding:28px 32px;background:#fff;border:1px solid var(--line);border-radius:10px;margin:0;}
.glance dt{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--copper);}
.glance dd{margin:4px 0 0;font-size:15px;color:var(--ink);}
.prose{max-width:720px;}
.prose h2{font-size:30px;margin:48px 0 14px;}
.prose p,.prose li{font-size:17px;font-weight:300;line-height:1.8;color:var(--ink);}
.prose ul{padding-left:20px;margin:0 0 1em;}
.prose strong{font-weight:600;color:var(--charcoal);}
.disclaimer{font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:18px;margin-top:48px;max-width:720px;}

/* gallery */
.gallery-group{margin-top:56px;}
.gallery-group h3{font-size:24px;margin-bottom:8px;}
.gallery-group > p{font-size:16px;font-weight:300;color:var(--ink);max-width:680px;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px;}
.gallery img,.gallery video{border-radius:8px;background:var(--line);width:100%;aspect-ratio:4/3;object-fit:cover;}

/* faq */
.faq{max-width:760px;}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.faq summary{font-family:var(--serif);font-size:20px;font-weight:500;cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--copper);font-family:var(--sans);}
.faq details[open] summary::after{content:"\2212";}
.faq p{font-size:16px;font-weight:300;line-height:1.75;color:var(--ink);margin:12px 0 0;}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start;}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px;}
.panel h2{font-size:26px;margin-bottom:10px;}
.form{display:grid;gap:16px;}
.form label{display:block;font-size:12.5px;font-weight:600;letter-spacing:0.3px;color:var(--charcoal);margin-bottom:6px;}
.form .opt{font-weight:400;color:var(--muted);}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:var(--ivory);color:var(--charcoal);}
.form textarea{min-height:140px;resize:vertical;}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form .note{font-size:12.5px;color:var(--muted);margin:0;}
.form .hp{position:absolute;left:-9999px;}
.form-status{font-size:14px;margin:0;}
.form-status--ok{color:#2E6B3F;}
.form-status--err{color:#9B2C2C;}

/* quote and cta */
.quote{text-align:center;}
.quote blockquote{font-family:var(--serif);font-size:34px;font-weight:300;font-style:italic;line-height:1.45;max-width:760px;margin:0 auto;}
.quote p{font-size:12.5px;letter-spacing:0.5px;color:var(--muted);margin-top:22px;}
.cta{text-align:center;}
.cta h2{font-size:44px;font-weight:300;margin-bottom:16px;}
.cta p{font-size:16px;font-weight:300;color:var(--ink);max-width:580px;margin:0 auto 32px;}
.cta .actions{justify-content:center;}

/* footer */
.footer{background:var(--charcoal);color:var(--bone);padding:72px 48px 40px;}
.footer__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;}
.footer__grid img{height:28px;width:auto;margin-bottom:18px;}
.footer__tag{font-family:var(--serif);font-size:19px;font-style:italic;font-weight:300;color:var(--bone);margin:0 0 6px;}
.footer__cred{font-size:13px;font-weight:300;color:var(--soft);margin:0;max-width:340px;}
.footer h2{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.footer a,.footer li{font-size:13.5px;color:var(--soft);text-decoration:none;}
.footer a:hover{color:var(--copper-light);}
.footer__base{max-width:var(--wrap);margin:56px auto 0;padding-top:24px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);}
.footer__base a{font-size:12px;color:var(--muted);}

/* responsive */
@media(max-width:900px){
  .grid-3,.pillars{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .hero__inner{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:640px){
  .section,.page-head,.footer{padding-left:22px;padding-right:22px;}
  .case-hero{padding:0 22px;}
  .hero{padding:48px 22px 56px;}
  .section{padding-top:64px;padding-bottom:64px;}
  h1,.hero h1{font-size:40px;}
  .page-head h1{font-size:36px;}
  h2,.cta h2{font-size:30px;}
  .grid-3,.grid-2,.pillars,.tiles,.steps,.gallery,.figure-pair,.figure-grid,.glance,.footer__grid,.form .row{grid-template-columns:1fr;}
  .nav{padding:12px 18px;}
  .nav__full{display:none;}
  .nav__mark{display:block;height:34px;width:auto;}
  .nav__links{gap:16px;}
  .nav__links a{font-size:13px;}
  .nav__links a.nav__cta{padding:7px 12px;}
  .quote blockquote{font-size:26px;}
}
@media(max-width:420px){ .nav__links a.nav__hide{display:none;} }
@media(prefers-reduced-motion:reduce){ *{transition:none !important;scroll-behavior:auto !important;} }