/* ==========================================================================
   Advanced Ceramics & Carbon — shared stylesheet
   One file controls the look of every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND COLORS — taken from the ACC logo and current site
   -------------------------------------------------------------------------- */
:root{
  --navy:        #14206B;   /* nav bar navy from current site */
  --navy-dark:   #0B1246;   /* deeper navy, footers and hovers */
  --navy-tint:   #EDF0FA;   /* pale navy wash for section backgrounds */
  --orange:      #F26522;   /* ACC logo orange — buttons and accents */
  --orange-dark: #D34E10;   /* hover state */
  --ink:         #121417;   /* body text, near-black like the logo wordmark */

  --paper:  #FFFFFF;
  --shade:  #F4F5F8;
  --rule:   #DCDFE6;
  --muted:  #5A626C;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 48px);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3{line-height:1.15;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(31px,4.8vw,52px);font-weight:900}
h2{font-size:clamp(25px,3.1vw,36px);font-weight:800}
h3{font-size:20px;font-weight:800}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(50px,6.5vw,88px)}
.shade{background:var(--shade);border-block:1px solid var(--rule)}
.lede{font-size:clamp(17.5px,1.5vw,20px);color:#31383F;max-width:66ch}
.mt{margin-top:26px}
.mt-h{margin-top:32px;margin-bottom:14px;font-size:17px}
.sec-intro{margin-bottom:32px}
.sec-intro .lede{margin-bottom:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:200}

.eyebrow-dark{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);font-weight:800;margin-bottom:10px;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;padding:14px 26px;border-radius:2px;
  font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.01em;
  background:var(--navy);color:#fff;border:2px solid var(--navy);
  transition:background .2s,border-color .2s,transform .2s;
}
.btn:hover{background:var(--navy-dark);border-color:var(--navy-dark);transform:translateY(-1px)}
.btn-accent{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-accent:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-onnavy{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-onnavy:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* --------------------------------------------------------------------------
   4. TOP BAR + HEADER + NAV
   -------------------------------------------------------------------------- */
.topbar{background:var(--navy-dark);color:#fff;font-size:13px}
.topbar .wrap{display:flex;gap:20px;align-items:center;padding-block:8px;flex-wrap:wrap}
.topbar .tb-tag{margin-right:auto;letter-spacing:.06em;color:rgba(255,255,255,.72);text-transform:uppercase;font-size:11.5px;font-weight:600}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:#FFC9A8}
@media(max-width:640px){.topbar .tb-tag{display:none}.topbar .wrap{justify-content:center}}

.header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--rule)}
.header .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{margin-right:auto;display:block;line-height:0}
.logo img{width:auto;height:clamp(38px,5vw,52px)}

.nav{display:flex;align-items:center;gap:2px}
.nav>a,.has-sub>button{
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;background:none;border:0;cursor:pointer;
  padding:10px 13px;border-radius:2px;white-space:nowrap;display:block;
  border-bottom:3px solid transparent;
}
.nav>a:hover,.has-sub>button:hover{color:var(--navy);border-bottom-color:var(--orange)}
.nav>a.current,.has-sub.active>button{color:var(--navy);border-bottom-color:var(--orange)}
.has-sub{position:relative}
.has-sub>button{display:flex;align-items:center;gap:7px}
.has-sub>button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{
  position:absolute;top:100%;left:0;min-width:210px;background:#fff;
  border:1px solid var(--rule);border-top:3px solid var(--orange);
  box-shadow:0 14px 32px rgba(0,0,0,.13);padding:6px;display:none;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block;font-size:14.5px;font-weight:500;padding:10px 12px;text-decoration:none;color:var(--ink);border-radius:2px}
.sub a:hover{background:var(--navy-tint);color:var(--navy)}
.sub a.current{color:var(--navy);font-weight:700}

.nav-cta{
  margin-left:10px;background:var(--orange);color:#fff!important;
  padding:11px 18px!important;border-radius:2px;text-decoration:none;
  font-size:14.5px;font-weight:700;border-bottom:0!important;transition:background .2s;
}
.nav-cta:hover{background:var(--orange-dark)}

.menu-btn{
  display:none;font:inherit;font-weight:700;font-size:14px;align-items:center;gap:9px;
  background:var(--navy);color:#fff;border:0;border-radius:2px;padding:11px 15px;cursor:pointer;
}
.bars{width:16px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}
@media(max-width:940px){
  .menu-btn{display:flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;
    border-bottom:3px solid var(--orange);padding:6px var(--pad) 18px;
    box-shadow:0 16px 28px rgba(0,0,0,.10);
  }
  .nav.open{display:flex}
  .nav>a,.has-sub>button{padding:13px 2px;border-bottom:1px solid var(--rule)}
  .nav>a.current,.has-sub.active>button{border-bottom-color:var(--rule);color:var(--orange)}
  .has-sub>button{display:none}
  .sub{position:static;display:block;border:0;box-shadow:none;padding:4px 0 4px 16px;border-left:3px solid var(--navy-tint)}
  .nav-cta{margin:14px 0 0;text-align:center}
}

/* --------------------------------------------------------------------------
   5. HERO + PAGE HEADS
   -------------------------------------------------------------------------- */
.hero{background:var(--navy);color:#fff;padding-block:clamp(46px,6.5vw,80px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 18%,rgba(242,101,34,.30),transparent 46%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-media{order:-1}}
.hero h1{color:#fff;max-width:19ch;font-size:clamp(29px,4.3vw,47px)}
.hero h1 span{color:var(--orange)}
.hero-lede{color:rgba(255,255,255,.9);max-width:56ch;font-size:clamp(17px,1.5vw,19.5px)}
.eyebrow{font-size:clamp(11.5px,1.15vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;font-weight:800;max-width:42ch;line-height:1.5}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.pagehead{background:var(--navy);color:#fff;padding-block:clamp(32px,4.2vw,54px);border-bottom:4px solid var(--orange)}
.pagehead h1{color:#fff;margin:0;font-size:clamp(28px,3.7vw,42px)}
.crumb{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:8px}
.crumb a{color:rgba(255,255,255,.92)}

/* --------------------------------------------------------------------------
   6. LAYOUT PIECES
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,56px);align-items:start}
.split.reverse{grid-template-columns:.8fr 1.2fr}
@media(max-width:860px){.split,.split.reverse{grid-template-columns:1fr}}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px)}
@media(max-width:800px){.twocol{grid-template-columns:1fr}}
.prop{border-top:4px solid var(--navy);padding-top:22px}
.prop .lede{margin:0}

/* icons */
.ico{width:44px;height:44px;color:var(--navy);margin-bottom:16px}
.ico .o{stroke:var(--orange)}
.ico-lg{width:56px;height:56px}

/* photo frames — real photo sits on top; grey hint shows if the file is absent */
.photo-frame{
  position:relative;width:100%;overflow:hidden;
  background:repeating-linear-gradient(45deg,#EDEFF3 0 12px,#E6E9EF 12px 24px);
  border:1px solid var(--rule);display:grid;place-items:center;text-align:center;
}
.photo-hint{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8A929C;padding:14px 18px;max-width:28ch;line-height:1.7;
}
.photo-hint code{
  display:inline-block;margin-top:8px;text-transform:none;letter-spacing:0;
  font-size:12.5px;background:#fff;border:1px solid var(--rule);padding:3px 7px;color:#5A626C;
}
.photo-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* stats */
.statstack{display:grid;gap:20px}
.stat{border-left:4px solid var(--orange);padding:2px 0 2px 18px}
.stat b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--navy)}
.stat span{color:var(--muted);font-size:14.5px;display:block;margin-top:4px}

/* cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.card{
  border:1px solid var(--rule);background:#fff;padding:26px 24px 24px;
  text-decoration:none;color:inherit;display:block;
  border-top:4px solid var(--navy);
  transition:border-top-color .2s,box-shadow .2s,transform .2s;
}
a.card:hover{border-top-color:var(--orange);box-shadow:0 12px 28px rgba(0,0,0,.09);transform:translateY(-3px)}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:15px;color:var(--muted)}
.card .arrow{display:inline-block;margin-top:16px;color:var(--orange);font-weight:800;font-size:14px}
.card .arrow::after{content:" \2192"}

/* material list */
.matlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));list-style:none;padding:0;margin:0}
.matlist li{
  background:#fff;border:1px solid var(--rule);border-left:4px solid var(--navy);
  padding:15px 18px;font-weight:600;font-size:16px;display:flex;gap:14px;align-items:baseline;
}
.mnum{font-size:12px;font-weight:800;color:var(--orange);letter-spacing:.06em}

/* tick list */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ticks li{padding-left:28px;position:relative;font-weight:500}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--orange);
}

/* markets */
.mkgrid{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mkgrid li{
  background:#fff;border:1px solid var(--rule);border-bottom:4px solid var(--orange);
  padding:20px;font-weight:700;font-size:17px;
}

/* specialty rows — every row identical: fixed-width image left, text right.
   Do NOT use `order` to flip alternate rows. `order` swaps which element sits
   in which column, but the columns keep their widths, so the image lands in the
   wide column and gets blown up and blurry. If alternation is ever wanted, swap
   grid-template-columns instead (1fr 280px). */
.specrow{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:center;padding-block:32px;border-top:1px solid var(--rule);
}
.specrow:first-of-type{border-top:0;padding-top:0}
.specmedia{max-width:260px}
@media(max-width:760px){
  .specrow{grid-template-columns:1fr;gap:18px}
  .specmedia{max-width:340px}
}
.specbody .ico{width:36px;height:36px;margin-bottom:10px}
.specbody h3{margin-bottom:8px}
.specbody p{margin:0;color:#31383F}

/* contact page */
.center-lede{max-width:64ch;margin:0 auto clamp(34px,4vw,50px);text-align:center}

.contact-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ccard{
  display:block;text-decoration:none;color:inherit;text-align:center;
  background:#fff;border:1px solid var(--rule);border-top:4px solid var(--navy);
  padding:32px 24px 28px;
  transition:border-top-color .2s,box-shadow .2s,transform .2s;
}
a.ccard:hover{border-top-color:var(--orange);box-shadow:0 12px 28px rgba(0,0,0,.09);transform:translateY(-3px)}
/* Address card is display-only — no link, no hover, no pointer cursor. */
.ccard-static{cursor:default}
.ccard-static .cval{margin-bottom:0}
.ccard .ico{width:40px;height:40px;margin:0 auto 16px}
.ccard h3{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:12px;
}
.cval{font-size:clamp(20px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;color:var(--navy);margin:0 0 8px;line-height:1.25}
.cval-sm{font-size:clamp(17px,1.6vw,19px)}
.cnote{margin:0;font-size:14px;color:var(--muted)}
a.ccard:hover .cnote{color:var(--orange)}

.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.linklist li{border-bottom:1px solid var(--rule)}
.linklist a{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 4px;text-decoration:none;color:var(--ink);font-weight:600;
  transition:padding-left .2s,color .2s;
}
.linklist a::after{content:"\2192";color:var(--orange);font-weight:800}
.linklist a:hover{color:var(--navy);padding-left:10px}

/* CTA strip */
.cta-strip{background:var(--navy-dark);color:#fff;text-align:center;padding-block:clamp(44px,5.5vw,70px)}
.cta-strip h2{color:#fff}
.cta-strip p{color:rgba(255,255,255,.86);max-width:58ch;margin-inline:auto}
.cta-btns{margin-top:24px;margin-bottom:0}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.footer{background:#0E1116;color:#A2AAB3;font-size:14.5px;padding-block:48px 26px}
.footer a{color:#CBD2D9;text-decoration:none}
.footer a:hover{color:var(--orange)}
.footer h4{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.footmark{font-size:30px;font-weight:900;font-style:italic;color:var(--orange);letter-spacing:-.02em;line-height:1;margin-bottom:10px}
.footname{color:#fff;font-weight:700;margin:0 0 10px}
.footcols{display:grid;gap:34px;grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:760px){.footcols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footcols{grid-template-columns:1fr}}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.legal{border-top:1px solid #262B32;margin-top:36px;padding-top:18px;font-size:13px;color:#727A83}

/* --------------------------------------------------------------------------
   8. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Content is VISIBLE by default. The .js class is only added by a script in the
   page <head>, so if JavaScript is off, blocked, or the file is opened without
   site.js, everything still shows. Never make content depend on JS to appear. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1;transform:none}
}