/* A brief introduction over a soft white feathered wash. */
body.intro-open { overflow: hidden; }
.header .intro-reopen { padding: 12px 0; background: none; font-size: inherit; text-align: left; }
.header .intro-reopen:hover { color: var(--accent); }
#intro-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:60px 48px; overflow:auto; overflow-x:hidden; background:transparent; color:#142339; border:0; box-shadow:none; }
#intro-dialog[open] { display:grid; place-items:center; }
#intro-dialog::backdrop { background:rgba(8,17,29,.12); backdrop-filter:blur(2px); }
.welcome-inner { --feather-x:max(24px,calc((100vw - 940px) / 2 - 12px)); --feather-y:clamp(44px,16vh,180px); position:relative; isolation:isolate; width:min(940px,100%); padding:48px; }
.welcome-inner::before {
 content:''; position:absolute; z-index:-1; inset:calc(-1 * var(--feather-y)) calc(-1 * var(--feather-x));
 background:rgba(255,255,255,.92); pointer-events:none;
 /* Keep the white center rectangular; fade smoothly toward each page edge. */
 mask-image:linear-gradient(to right,transparent,#0002 calc(var(--feather-x) * .25),#0008 calc(var(--feather-x) * .6),#000 var(--feather-x),#000 calc(100% - var(--feather-x)),#0008 calc(100% - var(--feather-x) * .6),#0002 calc(100% - var(--feather-x) * .25),transparent),linear-gradient(to bottom,transparent,#0002 calc(var(--feather-y) * .25),#0008 calc(var(--feather-y) * .6),#000 var(--feather-y),#000 calc(100% - var(--feather-y)),#0008 calc(100% - var(--feather-y) * .6),#0002 calc(100% - var(--feather-y) * .25),transparent);
 mask-composite:intersect;
}
.welcome-close { position:absolute; top:16px; right:18px; display:grid; place-items:center; width:40px; height:40px; background:transparent; color:#586273; font-size:29px; font-weight:300; }
.welcome-close:hover { color:#17283d; }
#welcome-title { font-size:clamp(42px,4.8vw,62px); line-height:1.04; font-weight:500; letter-spacing:-.045em; margin-top:0; outline:none; }
#welcome-title span { color:#85642f; }
.welcome-copy { max-width:735px; margin-top:24px; font-size:19px; line-height:1.6; color:#354459; }
.welcome-copy p + p { margin-top:18px; }
.welcome-choices { display:grid; grid-template-columns:1fr 1fr; margin-top:34px; }
.welcome-choice { display:flex; gap:20px; align-items:center; min-width:0; padding:20px 28px 20px 0; background:transparent; text-align:left; color:#142339; }
.welcome-choice + .welcome-choice { border-left:1px solid #a69b86; padding-left:30px; padding-right:0; }
.choice-icon { flex-shrink:0; width:56px; height:56px; color:#85642f; }
.welcome-choice strong { display:block; font-size:19px; line-height:1.35; font-weight:600; }
.welcome-choice:hover strong { color:#85642f; }
.welcome-choice:hover .choice-icon { transform:translateY(-2px); }
.welcome-choice:focus-visible,.welcome-close:focus-visible { outline-color:#725526; outline-offset:3px; }
@media(max-width:1000px) {
 #intro-dialog { padding-inline:38px; }
 .welcome-inner { padding:38px 28px; }
 .welcome-choice { gap:14px; padding-right:22px; }
 .welcome-choice + .welcome-choice { padding-left:24px; }
 .welcome-choice strong { font-size:17px; }
 .choice-icon { width:48px; height:48px; }
}
@media(max-width:700px) {
 #intro-dialog { padding:44px 24px; }
 .welcome-inner { --feather-x:24px; --feather-y:44px; padding:34px 16px; }
 .welcome-close { top:6px; right:4px; }
 #welcome-title { font-size:clamp(38px,7vw,50px); margin-top:0; }
 .welcome-copy { margin-top:22px; font-size:17px; line-height:1.6; }
 .welcome-choices { grid-template-columns:1fr; margin-top:24px; }
 .welcome-choice,.welcome-choice + .welcome-choice { padding:20px 0; border-left:0; gap:18px; }
 .welcome-choice + .welcome-choice { border-top:1px solid #b0a58f; }
 .welcome-choice strong { font-size:18px; }
 .choice-icon { width:50px; height:50px; }
}
@media(max-width:380px) {
 #intro-dialog { padding-inline:20px; }
 .welcome-inner { --feather-x:20px; padding-inline:10px; }
 .welcome-copy { font-size:16px; }
 .welcome-choice strong { font-size:16px; }
}

/* A bold signature line and recognizable app icons. */
.craft-tools { grid-column: 1 / -1; width: 100%; border-block: 2px solid #9c8757; padding: 32px 0 30px; background: linear-gradient(90deg, rgba(210,182,117,.065), transparent); }
.craft-heading { display: flex; align-items: center; gap: 32px; margin-bottom: 30px; }
#craft-title { flex-shrink: 0; color: var(--ink); font-family: Impact, 'Arial Black', Arial, sans-serif; font-size: clamp(32px, 4.1vw, 58px); line-height: 1.1; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
#craft-title > span { display: inline-block; max-width: 1.75em; font: 700 .32em/1.03 Arial, sans-serif; letter-spacing: .05em; vertical-align: middle; margin: -.22em .24em 0; }
.craft-rule { height: 1px; flex-grow: 1; background: linear-gradient(90deg, #9c8757, transparent); }
.craft-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 9px; }
.craft-list li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 11px; line-height: 1.4; font-weight: 700; color: #e6e9ef; }
.craft-icon { display: grid; place-items: center; width: 64px; height: 64px; background: #152337; border: 1px solid #3b4a60; border-radius: 13px; box-shadow: 0 5px 15px #04091266; }
.craft-icon img { width: 44px; height: 44px; object-fit: contain; }
.deadline-tile { background: #24303f; }
.deadline-mark { display: block; width: 44px; height: 44px; overflow: hidden; }
.craft-icon .deadline-mark img { width: 135px; max-width: none; height: 44px; object-fit: contain; object-position: left; }
@media (max-width: 1199px) {
  .craft-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 12px; }
}
@media (max-width: 700px) {
  .craft-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 10px; }
  .craft-heading { gap: 20px; }
}
@media (max-width: 580px) {
  .header .intro-reopen { padding: 14px 0; font-size: 16px; }
  .craft-tools { padding-block: 26px; }
  .craft-icon { width: 58px; height: 58px; }
  .craft-icon img { width: 40px; height: 40px; }
  .craft-list li { font-size: 10px; }
}
@media (max-width: 380px) {
  #craft-title { letter-spacing: .005em; }
  .craft-heading { gap: 0; }
  .craft-rule { display: none; }
  .craft-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Career milestones, with a clear progression and ownership highlighted. */
.career { padding-top:48px; padding-bottom:0; }
.career-heading { margin:0 0 42px; }
.career .career-heading h2 { display:grid; grid-template-columns:1fr 390px 1fr; align-items:last baseline; gap:.24em; font-size:clamp(22px,2.25vw,32px); font-weight:400; line-height:1.3; letter-spacing:-.025em; text-align:center; }
.career-heading h2 > span { color:var(--accent); }
.career-heading h2 > span:first-child { text-align:right; }
.career-heading h2 > span:last-child { text-align:left; }
.career-studio { display:block; width:390px; max-width:100%; padding:8px 0 0; }
.career-studio svg { display:block; width:100%; height:auto; }
.career-studio:hover { filter:brightness(1.2); }
@media(max-width:1050px) {
 .career .career-heading h2 { display:flex; flex-direction:column; align-items:center; gap:14px; }
 .career-heading h2 > span { text-align:center; }
 .career-studio { width:min(390px,90%); padding:8px 0; }
}
.craft-between { margin-top:36px; }
.timeline { list-style:none; margin:0; padding:30px 0 0; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; border-top:2px solid var(--accent); }
.timeline li { position:relative; padding:26px 20px 24px; min-width:0; border:1px solid #3c4b61; border-top:3px solid var(--accent); background:linear-gradient(145deg,#18283e,#0d1828); }
.timeline li::before { content:''; position:absolute; top:-38px; left:23px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--paper); }
.timeline .timeline-year { display:block; color:var(--accent); font-size:clamp(34px,3.2vw,48px); line-height:1; font-weight:700; letter-spacing:.01em; }
.timeline h3 { margin-top:22px; font-size:18px; font-weight:700; line-height:1.25; color:var(--ink); }
.timeline p { margin-top:12px; font-size:13px; line-height:1.6; color:#c4cedb; }
.timeline .timeline-ownership { background:linear-gradient(145deg,#d8bf83,#b59a5e); border-color:#d8bf83; }
.timeline-ownership .timeline-year,.timeline-ownership h3,.timeline-ownership p { color:#0b1727; }
@media(max-width:1199px) {
 .timeline { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 14px; }
 .timeline li:nth-child(n+4)::before { display:none; }
}
@media(max-width:580px) {
 .timeline { display:grid; grid-template-columns:1fr; border-top:0; border-left:2px solid var(--accent); padding:0 0 0 20px; gap:18px; margin-left:5px; }
 .timeline li { padding:20px; }
 .timeline li::before,.timeline li:nth-child(n+4)::before { display:block; top:27px; left:-28px; }
 .timeline .timeline-year { font-size:38px; }
 .timeline h3 { margin-top:12px; font-size:20px; }
 .timeline p { margin-top:8px; font-size:14px; }
}