/* Cary AI Consulting website. Colors and type follow the brand board (Nov 2026):
   matte black, cream, champagne, a touch of orange. Michroma is the wide display face
   closest to the logo's custom letters; Hanken Grotesk is the reading face. */
@font-face{font-family:"Michroma";src:url("/fonts/michroma.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --black:#000;
  --cream:#F8F4E9;
  --gold:#E8B66E;
  --gold-deep:#8A5F1F;
  --orange:#F76C0D;
  --dim:#B4AD9F;
  --line:rgba(232,182,110,.28);
  --display:"Michroma","Arial Black",sans-serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--cream);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:10px 16px;z-index:50}
.skip:focus{left:12px;top:12px}

h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(30px,4.1vw,54px);line-height:1.16}
h2{font-size:clamp(24px,2.7vw,36px);line-height:1.22}
h3{font:600 22px/1.3 var(--text)}
.sub{color:var(--dim);max-width:60ch;margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:600 17px/1 var(--text);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{background:var(--cream)}
.btn-line{border-color:var(--line);color:var(--cream)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-black{background:#000;color:var(--cream)}
.btn-black:hover{background:var(--gold-deep)}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.is-stuck{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:28px;min-height:92px}
.brand{flex:none;display:block}
.brand img{width:236px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:16px}
.nav a{text-decoration:none;color:var(--cream);padding:8px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.top-right{display:flex;align-items:center;gap:18px}
.signin{font-size:16px;color:var(--dim);text-decoration:none}
.signin:hover{color:var(--gold)}

/* Hero */
.hero{padding:64px 0 96px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}
.lead{font-size:21px;line-height:1.55;color:var(--cream);max-width:34em;margin-top:26px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.online{display:flex;gap:12px;align-items:flex-start;margin-top:30px;color:var(--dim);font-size:16px;max-width:36em}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-top:8px;box-shadow:0 0 0 0 rgba(247,108,13,.6);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(247,108,13,.55)}70%,100%{box-shadow:0 0 0 12px rgba(247,108,13,0)}}
.film-frame{position:relative;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#000;aspect-ratio:1/1}
.film-frame video{width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.7);color:var(--cream);border:1px solid var(--line);border-radius:999px;font:500 14px/1 var(--text);padding:9px 14px;cursor:pointer}
.film-toggle:hover{border-color:var(--gold);color:var(--gold)}
.hero-film figcaption{color:var(--dim);font-size:15px;margin-top:12px}

/* One page-load moment: the headline and the film arrive together. */
@media (prefers-reduced-motion:no-preference){
  .hero-text>*{opacity:0;transform:translateY(14px);animation:arrive .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-text>*:nth-child(2){animation-delay:.08s}
  .hero-text>*:nth-child(3){animation-delay:.16s}
  .hero-text>*:nth-child(4){animation-delay:.24s}
  .hero-film{opacity:0;animation:arrive-film .9s cubic-bezier(.2,.7,.2,1) .12s forwards}
}
@keyframes arrive{to{opacity:1;transform:none}}
@keyframes arrive-film{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* Sections */
.sec{padding:96px 0}
.sec-rule{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* What I do: three columns named for the three things on the logo */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line)}
.pillar{padding:34px 34px 8px 0}
.pillar+.pillar{padding-left:34px;border-left:1px solid var(--line)}
.pillar h3{font:400 21px/1.3 var(--display);color:var(--gold)}
.pillar p{margin-top:16px;color:var(--cream)}
.pillar ul{margin-top:20px}
.pillar li{position:relative;padding:9px 0 9px 22px;color:var(--dim);border-top:1px solid rgba(248,244,233,.09)}
.pillar li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:1.5px;background:var(--gold)}

/* Pick your kind of business */
.trades{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;margin-top:44px;align-items:start}
.trade-tabs{display:flex;flex-direction:column}
.trade-tab{appearance:none;background:none;border:0;border-bottom:1px solid rgba(248,244,233,.12);color:var(--dim);font:500 18px/1.3 var(--text);text-align:left;padding:15px 0 15px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color .15s,padding-left .2s}
.trade-tab:hover{color:var(--cream)}
.trade-tab[aria-selected="true"]{color:var(--gold);padding-left:14px}
.trade-tab[aria-selected="true"]::after{content:"";width:22px;height:1.5px;background:var(--gold)}
.trade-panel{min-height:420px}
.trade-panel h3{font:400 clamp(20px,2.2vw,28px)/1.25 var(--display)}
.trade-rows{margin-top:26px;border-top:1px solid var(--line)}
.trade-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.trade-row dt{font-weight:600;color:var(--gold)}
.trade-row dd{margin:0;color:var(--cream);max-width:54ch}
@media (prefers-reduced-motion:no-preference){
  .trade-panel.swap .trade-row,.trade-panel.swap h3{animation:arrive .42s cubic-bezier(.2,.7,.2,1) both;transform:translateY(8px)}
  .trade-panel.swap .trade-row:nth-child(2){animation-delay:.05s}
  .trade-panel.swap .trade-row:nth-child(3){animation-delay:.1s}
}

/* Add up your busywork (the one cream section) */
.sec-cream{background:var(--cream);color:#16130D}
.sec-cream .sub{color:#5B5445}
.calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:start}
.calc-rows{margin-top:34px}
.calc-row{display:grid;grid-template-columns:minmax(0,1fr) 200px 96px;gap:22px;align-items:center;padding:16px 0;border-top:1px solid rgba(22,19,13,.16)}
.calc-row:last-child{border-bottom:1px solid rgba(22,19,13,.16)}
.calc-row label{font-weight:600;line-height:1.3}
.calc-row small{display:block;font-weight:400;color:#5B5445;font-size:15px;margin-top:2px}
.calc-row output{font-variant-numeric:tabular-nums;text-align:right;color:#16130D;font-size:16px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#16130D var(--fill,0%),rgba(22,19,13,.2) var(--fill,0%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(22,19,13,.2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:#16130D}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#16130D;border:3px solid var(--gold);margin-top:-9px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#16130D;border:3px solid var(--gold)}
.calc-total{position:sticky;top:124px;background:#000;color:var(--cream);border-radius:28px;padding:38px 36px}
.calc-label{color:var(--dim);font-size:16px}
.calc-num{margin-top:10px;line-height:1.05}
.calc-num #calc-hours{font:400 clamp(56px,7vw,92px)/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;display:inline-block}
.calc-unit{display:block;margin-top:10px;font-size:19px;color:var(--cream)}
.calc-note{margin-top:18px;color:var(--dim);font-size:16px;min-height:3.2em}
.calc-total .btn{margin-top:18px;background:var(--gold);color:#000}
.calc-total .btn:hover{background:var(--cream)}

/* How it works: a real sequence, so it is numbered */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:48px;counter-reset:s}
.steps li{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.steps .num{font:400 15px/1 var(--display);color:#000;background:var(--gold);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:absolute;top:-17px;left:0}
.steps h3{margin-top:14px}
.steps p{margin-top:10px;color:var(--dim)}

/* About */
.about{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:center}
.about-photo{width:300px;height:300px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);padding:8px;background:#000}
.about-text p{margin-top:18px;max-width:62ch}
.about-text .areas{color:var(--dim)}

/* Questions */
.faq-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font:600 19px/1.35 var(--text);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;background:var(--gold);transition:transform .22s}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:var(--gold)}
.faq details p{padding:0 44px 24px 0;color:var(--dim);max-width:62ch}

/* Contact */
.sec-contact{border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.contact-call p{margin-top:18px;color:var(--dim);max-width:34em}
.bignum{display:inline-block;margin-top:30px;font:400 clamp(26px,3.5vw,46px)/1.1 var(--display);color:var(--gold);text-decoration:none;white-space:nowrap}
.bignum:hover{color:var(--cream)}
.checkup{margin-top:34px;border-top:1px solid var(--line);max-width:30em}
.checkup li{padding:13px 0;border-bottom:1px solid var(--line);color:var(--cream)}
.contact-form{border:1px solid var(--line);border-radius:28px;padding:34px}
.contact-form h3{margin-bottom:20px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:15px;color:var(--dim);margin-bottom:6px}
.field input,.field textarea{width:100%;background:#000;border:1px solid rgba(248,244,233,.28);border-radius:12px;color:var(--cream);font:400 17px/1.4 var(--text);padding:13px 14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,182,110,.22)}
.field textarea{resize:vertical}
.field.bad input{border-color:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:14px;min-height:1.6em;font-size:16px;color:var(--gold)}
.form-msg.err{color:#FF9A57}
.contact-form.sent .field,.contact-form.sent .field-row,.contact-form.sent button{display:none}

/* Footer */
.foot{border-top:1px solid var(--line);padding:56px 0 30px;font-size:16px;color:var(--dim)}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;align-items:start}
.foot-brand img{width:260px}
.foot h4{font:600 16px/1.3 var(--text);color:var(--cream);margin-bottom:10px}
.foot li{padding:2px 0}
.foot p+p{margin-top:12px}
.foot a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.foot-base{margin-top:40px;padding-top:20px;border-top:1px solid rgba(248,244,233,.09);font-size:14px}

/* Smaller screens */
@media (max-width:1040px){
  .nav{display:none}
  .top-right{margin-left:auto}
  .hero-in,.calc,.contact{grid-template-columns:1fr;gap:44px}
  .hero-film{max-width:560px}
  .calc-total{position:static}
  .trades,.faq-wrap{grid-template-columns:1fr;gap:28px}
  .trade-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .trade-tabs::-webkit-scrollbar{display:none}
  .trade-tab{flex:none;border:1px solid rgba(248,244,233,.2);border-radius:999px;padding:10px 16px;font-size:16px}
  .trade-tab[aria-selected="true"]{padding-left:16px;border-color:var(--gold)}
  .trade-tab[aria-selected="true"]::after{display:none}
  .trade-panel{min-height:0}
  .about{grid-template-columns:1fr;gap:32px}
  .about-photo{width:200px;height:200px}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .top-in{min-height:76px;gap:14px}
  .brand img{width:158px}
  .signin{display:none}
  .hero{padding:36px 0 64px}
  .lead{font-size:19px}
  .sec{padding:64px 0}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar+.pillar{padding:28px 0 6px;border-left:0}
  .pillar+.pillar{border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr;gap:44px}
  .trade-row{grid-template-columns:1fr;gap:6px}
  .calc-row{grid-template-columns:1fr 84px;gap:6px 14px}
  .calc-row label{grid-column:1/-1}
  .field-row{grid-template-columns:1fr}
  .contact-form{padding:24px 20px}
  .foot-in{grid-template-columns:1fr;gap:28px}
  .ctas .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
}

/* Very wide screens: scale the whole page up so it does not sit small in the middle. */
@media (min-width:1700px){body{zoom:1.15}}
@media (min-width:2100px){body{zoom:1.32}}
@media (min-width:2600px){body{zoom:1.5}}
@media (min-width:3100px){body{zoom:1.7}}