/* SillyDino Software homepage. Tokens follow design_handoff_sillydino_website/README.md. */
:root{
  --navy:#1D3A5C;
  --navy-hover:#2E5A8A;
  --ink:#14243A;
  --ink-hover:#1A2F4B;
  --cream:#F5E8D6;
  --cream-line:#E6D6BE;
  --offwhite:#FAF8F3;
  --white:#FFFFFF;
  --card-line:#E7E2D6;
  /* The spec's #DCD6C8 input border is ~1.4:1 on white; darkened to meet the
     3:1 non-text contrast WCAG 1.4.11 asks of form-control boundaries. */
  --field-line:#948C7B;
  --yellow:#F4C21B;
  --yellow-hover:#FFD23F;
  --chip-bg:#FBF0C9;
  --chip-text:#6B5A2A;
  --green:#5FA83A;
  --green-light:#7FC55A;
  --green-tint:#E8F0E0;
  --green-text:#2F5A1C;
  --green-body:#2F4A22;
  --sky:#CFE3EE;
  --body:#3D4F66;
  --work-body:#24384F;
  --muted:#5E6D7F;          /* spec #6B7A8C is 4.4:1 on white; nudged to pass AA */
  --error:#A3271A;
  --on-dark-1:#D9E6EF;
  --on-dark-2:#C4D3E0;
  --on-dark-3:#B4C5D4;
  --on-dark-4:#8FA6BD;
  --term-red:#E0644A;
  --font-head:"Zilla Slab", Georgia, serif;
  --font-body:"Figtree", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --header-h:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--navy); text-decoration:none}
a:hover{color:var(--navy-hover)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}
input,textarea,button{font:inherit}

/* Keyboard focus: navy ring on light surfaces, yellow on dark ones. */
:focus-visible{outline:3px solid var(--navy-hover); outline-offset:3px; border-radius:4px}
.azure :focus-visible,.card-dark :focus-visible,.site-footer :focus-visible,.term-body:focus-visible{outline-color:var(--yellow)}
.btn:focus-visible,.nav-cta:focus-visible{border-radius:999px}

.skip{position:absolute; left:16px; top:-60px; z-index:50; background:var(--navy); color:var(--offwhite); padding:10px 16px; border-radius:999px; font-weight:600}
.skip:focus{top:12px; color:var(--offwhite)}

/* Sections are padded 28px at the edge with a 1200px content column inside. */
.wrap{max-width:1200px; margin:0 auto}
section[id]{scroll-margin-top:var(--header-h)}
.section{padding:110px 28px}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:rgba(245,232,214,0.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--cream-line); padding:14px 28px}
.header-inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.logo{display:flex; border-radius:6px}
.logo img{display:block; height:46px; width:auto}
.nav{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-left:auto; font-weight:600; font-size:15px}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--navy-hover)}
.nav-cta{background:var(--yellow); color:var(--ink); padding:10px 18px; border-radius:999px; font-weight:600; font-size:15px; margin-left:4px; white-space:nowrap}
.nav-cta:hover{background:var(--yellow-hover); color:var(--ink)}

/* ---------- Shared type ---------- */
.eyebrow{font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy-hover)}
.h2{font-family:var(--font-head); font-weight:700; font-size:clamp(38px,4.6vw,56px); line-height:1.04; color:var(--navy); text-wrap:balance}
.body-lg{font-size:18px; line-height:1.6; color:var(--body); text-wrap:pretty}
.head{display:flex; flex-direction:column; gap:14px}
.stack-56{display:flex; flex-direction:column; gap:56px}
.stack-44{display:flex; flex-direction:column; gap:44px}

/* ---------- Buttons ---------- */
.btn-row{display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-block; padding:16px 26px; border-radius:999px; font-size:16px; line-height:1.2; text-align:center; transition:background-color .15s, color .15s}
.btn-primary{background:var(--navy); color:var(--offwhite); font-weight:700}
.btn-primary:hover{background:var(--navy-hover); color:var(--offwhite)}
.btn-outline{border:1.5px solid var(--navy); color:var(--navy); font-weight:600; padding:14.5px 24.5px}
.btn-outline:hover{background:var(--navy); color:var(--offwhite)}
.btn-row-sm{gap:12px; margin-top:6px}
.btn-sm{padding:14px 22px; font-size:15px}
.btn-outline.btn-sm{padding:12.5px 20.5px}

/* ---------- Hero ---------- */
.hero{padding:88px 28px 96px}
.hero-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:56px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:26px; min-width:0}
.status{display:inline-flex; align-self:flex-start; align-items:center; gap:10px; background:var(--green-tint); color:var(--green-text); padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; line-height:1.4}
.status .dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--green)}
.hero h1{font-family:var(--font-head); font-weight:700; font-size:clamp(50px,6.6vw,86px); line-height:1; letter-spacing:-0.01em; color:var(--navy)}
.hl{background:linear-gradient(transparent 62%, var(--yellow) 62%)}
.lede{font-size:20px; line-height:1.55; color:var(--body); max-width:36ch; text-wrap:pretty}

.hero-art{position:relative; padding:0 0 60px 40px; min-width:0}
.terminal{background:var(--ink); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px rgba(20,36,58,0.25)}
.term-bar{display:flex; gap:7px; padding:14px 16px; background:var(--navy)}
.term-bar span{width:11px; height:11px; border-radius:50%; background:var(--term-red)}
.term-bar span:nth-child(2){background:var(--yellow)}
.term-bar span:nth-child(3){background:var(--green)}
.term-body{padding:22px 24px 28px; font-family:var(--font-mono); font-size:14px; line-height:1.9; color:var(--sky); overflow-x:auto; border-radius:0}
.t-line{white-space:pre}
.t-ps{color:var(--yellow)}
.t-ok{color:var(--on-dark-4)}
.t-done{color:var(--green-light)}
.hero-mascot{position:absolute; left:-10px; bottom:0; width:170px; height:auto; filter:drop-shadow(0 14px 24px rgba(20,36,58,0.25)); pointer-events:none}

/* Terminal plays back on load: commands type out, output lines appear after. */
@media (prefers-reduced-motion:no-preference){
  .t-line{animation:t-show 0s var(--d) both}
  .t-cmd .t-in{display:inline-block; vertical-align:top; overflow:hidden; width:0; animation:t-type var(--t) steps(var(--n)) var(--d) forwards}
}
@keyframes t-show{from{visibility:hidden}}
@keyframes t-type{to{width:calc(var(--n) * 1ch)}}

/* ---------- Services ---------- */
.services{border-top:1px solid var(--cream-line)}
.split-head{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:24px 56px; align-items:end}
.services-lede{max-width:44ch}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px}
.card{background:var(--white); border:1px solid var(--card-line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:14px; transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,36,58,0.1)}
.num{align-self:flex-start; font-family:var(--font-mono); font-size:13px; line-height:1.4; color:var(--chip-text); background:var(--chip-bg); padding:4px 10px; border-radius:6px}
.card h3{font-size:22px; font-weight:700; color:var(--ink); line-height:1.2}
.card p{font-size:16px; line-height:1.6; color:var(--body)}
.card-dark{background:var(--navy); border-color:var(--navy)}
.card-dark:hover{box-shadow:0 18px 40px rgba(20,36,58,0.2)}
.card-dark .num{background:var(--yellow); color:var(--ink)}
.card-dark h3{color:var(--offwhite)}
.card-dark p{color:var(--on-dark-1)}
.card-link{margin-top:auto; color:var(--yellow); font-weight:600; font-size:15px; align-self:flex-start}
.card-link:hover{color:var(--yellow-hover)}
@media (prefers-reduced-motion:reduce){ .card{transition:none} .card:hover{transform:none} }

/* ---------- Experience ---------- */
.experience{padding-top:0}
.exp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:56px; align-items:start}
.exp-copy{display:flex; flex-direction:column; gap:18px}
.exp-copy .body-lg{max-width:48ch}
.exp-side{display:flex; flex-direction:column; gap:20px; min-width:0}
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--cream-line); border:1px solid var(--cream-line); border-radius:20px; overflow:hidden}
.stat{background:var(--white); padding:28px; display:flex; flex-direction:column; gap:6px}
.stat dt{font-family:var(--font-head); font-weight:700; font-size:52px; line-height:1; color:var(--navy)}
.stat dd{font-size:15px; line-height:1.5; color:var(--body)}
.certs{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.certs ul{display:contents}
.certs-label{font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--chip-text); margin-right:4px}
.certs li{background:var(--chip-bg); color:var(--chip-text); border-radius:6px; padding:5px 10px; font-size:13px; font-weight:600}

/* ---------- Azure ---------- */
.azure{background:var(--ink); color:var(--offwhite); position:relative; overflow:hidden}
.azure::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(207,227,238,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(207,227,238,0.05) 1px, transparent 1px); background-size:48px 48px; pointer-events:none}
.azure-inner{position:relative; display:flex; flex-direction:column; gap:64px}
.azure-intro{display:flex; flex-direction:column; gap:18px; max-width:780px}
.azure .eyebrow{color:var(--yellow)}
.azure .h2{color:var(--offwhite); font-size:clamp(38px,4.8vw,60px)}
.azure-intro p:last-child{font-size:19px; line-height:1.6; color:var(--on-dark-2); text-wrap:pretty}
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1px; background:rgba(207,227,238,0.14); border:1px solid rgba(207,227,238,0.14); border-radius:20px; overflow:hidden}
.caps li{background:var(--ink); padding:28px; display:flex; flex-direction:column; gap:10px; transition:background-color .2s}
.caps li:hover{background:var(--ink-hover)}
.tag{font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-light)}
.caps h3{font-size:20px; font-weight:700; color:var(--offwhite); line-height:1.2}
.caps p,.steps p{font-size:15px; line-height:1.6; color:var(--on-dark-3)}
.process{display:flex; flex-direction:column; gap:26px}
.process > h3{font-family:var(--font-head); font-weight:700; font-size:30px; line-height:1.2}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:20px}
.steps li{border-top:3px solid var(--yellow); padding-top:20px; display:flex; flex-direction:column; gap:10px}
.step-n{font-family:var(--font-mono); font-size:13px; color:var(--yellow)}
.steps h4{font-size:20px; font-weight:700; line-height:1.2}

/* ---------- Featured work ---------- */
.feature{background:var(--sky); border-radius:28px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:44px; align-items:center}
.feature-icon{display:flex; justify-content:center}
.feature-icon img{display:block; width:min(100%,260px); height:auto; aspect-ratio:1; border-radius:22%; box-shadow:0 24px 50px rgba(20,36,58,0.2)}
.feature-copy{display:flex; flex-direction:column; gap:18px}
.feature-meta{font-family:var(--font-mono); font-size:13px; color:var(--navy)}
.feature h3{font-family:var(--font-head); font-weight:700; font-size:44px; line-height:1.2; color:var(--ink)}
.feature-body{font-size:18px; line-height:1.6; color:var(--work-body); max-width:52ch; text-wrap:pretty}

/* ---------- Contact ---------- */
.contact{padding-top:0}
.contact-panel{background:var(--white); border:1px solid var(--card-line); border-radius:28px; padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:56px}
.contact-copy{display:flex; flex-direction:column; gap:18px}
.h2-contact{font-size:clamp(38px,4.4vw,54px); text-wrap:wrap}
.contact-copy .body-lg{max-width:40ch}
.email-alt{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:12px; font-size:15px}
.email-alt img{width:84px; height:auto; flex:none}
.email-alt div{display:flex; flex-direction:column; gap:4px; min-width:0}
.email-alt span{color:var(--body)}
.email-alt a{font-weight:700; color:var(--navy); overflow-wrap:break-word}
.email-alt a:hover{color:var(--navy-hover)}

.contact-form-area{display:flex; flex-direction:column; min-width:0}
.contact-form{display:flex; flex-direction:column; gap:18px}
.contact-form[hidden]{display:none}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label,.needs legend{font-size:14px; font-weight:600; color:var(--ink)}
.field label .hint{display:block; font-weight:400; color:var(--muted); margin-top:2px}
.field input,.field textarea{width:100%; border:1.5px solid var(--field-line); border-radius:12px; padding:13px 14px; font-size:16px; color:var(--ink); background:var(--offwhite); outline:none; transition:border-color .15s, background-color .15s}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field textarea:focus{border-color:var(--navy); background:var(--white)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid rgba(46,90,138,0.35); outline-offset:1px; border-radius:12px}
.field input[aria-invalid="true"]{border-color:var(--error)}
.field-err,.form-err{font-size:14px; line-height:1.5; color:var(--error); font-weight:600}
.form-err{background:#FBE9E6; border-radius:12px; padding:12px 14px; font-weight:500}
.form-err a{color:var(--error); font-weight:700; text-decoration:underline}

.needs{border:0; margin:0; padding:0; min-width:0}
.needs legend{padding:0; margin-bottom:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.chip span{display:inline-block; border:1.5px solid var(--field-line); background:var(--offwhite); color:var(--navy); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; line-height:1.2; transition:background-color .15s, color .15s, border-color .15s}
.chip:hover span{border-color:var(--navy)}
.chip input:checked + span{background:var(--navy); border-color:var(--navy); color:var(--offwhite)}
.chip input:focus-visible + span{outline:3px solid var(--navy-hover); outline-offset:3px}

.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

.btn-submit{align-self:flex-start; background:var(--yellow); color:var(--ink); border:0; padding:16px 28px; font-size:16px; font-weight:700; cursor:pointer}
.btn-submit:hover{background:var(--yellow-hover)}
.btn-submit[disabled]{cursor:progress; opacity:.75}
.btn-submit[disabled]:hover{background:var(--yellow)}

.sent{flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; background:var(--green-tint); border-radius:20px; padding:40px}
.sent[hidden]{display:none}
.sent h3{font-family:var(--font-head); font-weight:700; font-size:34px; line-height:1.15; color:var(--green-text); outline:none}
.sent p{font-size:17px; line-height:1.6; color:var(--green-body)}
.link-btn{align-self:flex-start; background:none; border:0; padding:0; font-weight:600; color:var(--green-text); text-decoration:underline; cursor:pointer}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:var(--on-dark-2); padding:36px 28px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:14px}
.site-footer nav{display:flex; gap:12px 24px; flex-wrap:wrap}
.site-footer a{color:var(--offwhite)}
.site-footer a:hover{color:var(--yellow)}

/* ---------- Small screens ---------- */
@media (max-width:1031px){
  /* Single-column hero: the terminal spans the full width, so the spec's
     overlap would sit on top of the log. Hang the mascot below it instead. */
  .hero-art{padding-bottom:110px}
  .hero-mascot{width:150px}
}
@media (max-width:720px){
  /* Logo and CTA share the first row; the four text links get their own. */
  :root{--header-h:118px}
  .site-header{padding:12px 20px}
  .header-inner{justify-content:space-between; gap:12px}
  .nav{order:3; width:100%; margin-left:0; gap:6px 22px}
  .nav-cta{margin-left:auto}
  .section{padding:80px 20px}
  .experience,.contact{padding-top:0}
  .hero{padding:56px 20px 72px}
  .site-footer{padding:32px 20px}
}
@media (max-width:480px){
  /* Hang the mascot below the terminal so it only clips the corner, not the log. */
  .hero-art{padding-left:24px; padding-bottom:84px}
  .hero-mascot{width:112px; left:-6px}
  .term-body{font-size:13px; padding:18px 18px 24px}
  .stat{padding:22px 18px}
  .stat dt{font-size:42px}
  .sent{padding:28px}
}
@media (max-width:380px){
  .nav{gap:6px 18px}
  .stats{grid-template-columns:1fr}
}