:root{
  --navy:#12266b; --navy-soft:#2a3d85;
  --cream:#fbf7f0; --sand:#f1e4cf; --paper:#fffdf9;
  --clay:#d9774a; --clay-dark:#b85d33; --sage:#7a9b86;
  --ink:#27283a; --muted:#6b6c7e; --line:#e6dccb;
  --r:18px; --shadow:0 10px 30px -12px rgba(18,38,107,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 "Nunito",system-ui,sans-serif}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;color:var(--navy);line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(1.8rem,3.5vw,2.4rem)}
a{color:inherit}
img{max-width:100%}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px max(16px,4vw);position:sticky;top:0;background:rgba(251,247,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.brand img{height:64px;display:block}
nav{display:flex;gap:22px}
nav a{text-decoration:none;font-weight:700;color:var(--navy);padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--clay)}

section{padding:64px max(16px,4vw);max-width:1280px;margin:auto}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding-top:56px}
.eyebrow{color:var(--clay-dark);font-weight:700;letter-spacing:.04em;margin:0 0 12px}
h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:.35em}
.scribble{position:relative;white-space:nowrap}
.scribble::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.28em;background:var(--clay);opacity:.35;border-radius:50% 40% 60% 30%/70% 60% 40% 50%;transform:rotate(-1.5deg);z-index:-1}
.lead{font-size:1.2rem;max-width:34em;color:#3d3e55}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 14px}
.fine{color:var(--muted);font-size:.92rem;margin:0}

.btn{display:inline-block;border:0;cursor:pointer;font:700 1rem "Nunito",sans-serif;background:var(--navy);color:#fff;padding:13px 26px;border-radius:999px;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{background:var(--navy-soft);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.ghost:hover{background:var(--sand)}
.btn.small{padding:8px 16px;font-size:.9rem}
.btn.danger{color:var(--clay-dark);box-shadow:inset 0 0 0 2px var(--clay)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--clay);outline-offset:2px}

.hero-card{position:relative;display:grid;place-items:center;min-height:340px}
.hero-card::before{content:"";position:absolute;inset:6% 4%;background:var(--sand);border-radius:42% 58% 55% 45%/50% 45% 55% 50%}
.paper{position:relative;width:min(300px,80%);background:var(--paper);border-radius:14px;padding:22px;box-shadow:var(--shadow);transform:rotate(-3deg)}
.paper-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.paper-head b{display:block;font-family:"Fraunces",serif;color:var(--navy)}
.paper-head small{color:var(--muted)}
.dot{width:42px;height:42px;border-radius:50%;background:var(--sage)}
.line{display:block;height:8px;border-radius:4px;background:var(--line);margin:9px 0}
.w90{width:90%}.w85{width:85%}.w80{width:80%}.w75{width:75%}.w70{width:70%}.w60{width:60%}.w50{width:50%}
.paper h4{font-size:.95rem;margin:16px 0 4px}
.sticker{position:absolute;right:6%;bottom:10%;background:var(--clay);color:#fff;font-weight:800;font-size:.85rem;line-height:1.25;text-align:center;padding:14px;border-radius:50%;width:92px;height:92px;display:grid;place-items:center;transform:rotate(9deg);box-shadow:var(--shadow)}

/* how */
.steps{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.steps li:nth-child(2){transform:translateY(14px)}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--clay);color:#fff;font:700 1.1rem "Fraunces",serif;margin-bottom:12px}
.steps h3{font-size:1.25rem}
.steps p{margin:0;color:#4a4b63}

/* builder */
.builder{max-width:1500px}
.builder-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.builder-head h2{margin:0}
.tools{display:flex;gap:8px;flex-wrap:wrap}
label.file{cursor:pointer}
.builder-grid{display:grid;grid-template-columns:minmax(320px,5fr) 6fr;gap:28px;align-items:start}
.forms{display:grid;gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:0 22px}
.card[open]{padding-bottom:22px}
.card summary{cursor:pointer;font:700 1.25rem "Fraunces",serif;color:var(--navy);padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:"+";font-size:1.5rem;color:var(--clay)}
.card[open] summary::after{content:"–"}
.count{font:600 .85rem "Nunito",sans-serif;color:var(--muted);margin-left:auto;margin-right:12px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fields .wide{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.9rem;color:var(--navy)}
input,select,textarea{font:400 1rem "Nunito",sans-serif;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--sage)}
textarea{resize:vertical}
.act-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.act-list li{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;background:var(--cream);border-radius:12px;padding:10px 14px}
.act-list small{display:block;color:var(--muted)}
.act-list button{border:0;background:none;color:var(--clay-dark);font-weight:700;cursor:pointer;padding:4px 8px;border-radius:8px}
.act-list button:hover{background:var(--sand)}

.preview-col{position:sticky;top:96px}
.preview-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;color:var(--navy)}

/* the CV sheet */
.cv{background:#fff;border-radius:6px;box-shadow:var(--shadow);padding:34px 38px;font-size:.92rem;line-height:1.5;min-height:520px;color:#222;overflow-wrap:anywhere}
.cv-top{display:flex;gap:18px;align-items:center;border-bottom:3px solid var(--navy);padding-bottom:14px;margin-bottom:6px}
.cv-top img{height:46px}
.cv-name{font:700 1.7rem "Fraunces",serif;color:var(--navy);line-height:1.1}
.cv-name-ar{font-size:1.2rem;color:var(--navy)}
.cv-sub{color:#555;margin-top:2px}
.cv h4{font:700 .82rem "Nunito",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:3px;margin:18px 0 8px}
.cv p{margin:0 0 4px}
.cv .info{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.cv .info b{color:var(--navy)}
.cv .item{margin-bottom:9px;break-inside:avoid}
.cv .item-head{display:flex;justify-content:space-between;gap:12px}
.cv .item-head span:last-child{color:#666;white-space:nowrap;font-size:.85rem}
.cv .item small{color:#555;display:block}
.cv .chips{display:flex;flex-wrap:wrap;gap:6px}
.cv .chips span{background:var(--sand);border-radius:999px;padding:2px 11px;font-size:.84rem}
.cv .empty{color:var(--muted);text-align:center;padding:60px 10px}
.cv .more{color:var(--clay-dark);font-size:.85rem}

/* help + footer */
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:20px}
.help-grid div{border-left:4px solid var(--sage);padding-left:18px}
.help-grid h3{font-size:1.15rem}
.help-grid p{margin:0;color:#4a4b63}
.site-footer{background:var(--sand);text-align:center;padding:36px 16px}
.site-footer img{height:56px;opacity:.9}
.site-footer p{margin:10px 0 0;color:var(--navy);font-weight:600}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-card{min-height:280px}
  .builder-grid{grid-template-columns:1fr}
  .preview-col{position:static}
}
@media (max-width:560px){
  .fields{grid-template-columns:1fr}
  .cv{padding:22px 18px}
  .cv .info{grid-template-columns:1fr}
  nav{gap:14px;font-size:.92rem}
  .steps li:nth-child(2){transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* print: only the CV, on A4 */
@page{size:A4;margin:14mm}
@media print{
  body{background:#fff;font-size:11pt}
  body>*:not(main),main>*:not(.builder),.builder-head,.forms,.preview-bar{display:none!important}
  .builder,.builder-grid,.preview-col{display:block!important;padding:0;margin:0;max-width:none;position:static}
  .cv{box-shadow:none;border-radius:0;padding:0;min-height:0;font-size:10pt}
  .cv .chips span,.cv-top{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}