/* hassanakkad.com — Akkad Brand System
   Tokens first; every colour on the site comes from these. Dark values follow the brand's dark theme. */

@font-face{font-family:'Lora';src:url('/assets/fonts/lora-latin-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/outfit-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --slate:#2C3E50;--slate-raised:#34495E;--emerald:#2D6A5E;--taupe:#9B8B7E;
  --canvas:#FFFFFF;--soft:#F5F7FA;--border:#E8E8E8;--ink:#1A1A1A;--muted:#6B6B6B;--heading:#2C3E50;
  --accent:#2D6A5E;--accent-hover:#245A4F;--on-accent:#FFFFFF;--rule:#2D6A5E;
  --btn2-bg:#2C3E50;--btn2-fg:#7FBFAA;--btn2-border:transparent;
  --card:#FFFFFF;--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lift:0 10px 28px rgba(44,62,80,.14);
  --field:#FFFFFF;--field-border:#C9CED4;--error:#B03A2E;--positive:#1D7A43;
  /* the desk (page header band) is slate in both themes */
  --desk:#2C3E50;--desk-ink:#FFFFFF;--desk-muted:#D0D0D0;--desk-accent:#88C5B1;--desk-line:rgba(255,255,255,.14);
  --sig:#2C3E50;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#2C3E50;--soft:#34495E;--border:rgba(255,255,255,.12);--ink:#FFFFFF;--muted:#D0D0D0;--heading:#FFFFFF;
  --accent:#88C5B1;--accent-hover:#9DD0BF;--on-accent:#2C3E50;--rule:#88C5B1;
  --btn2-bg:#34495E;--btn2-fg:#88C5B1;--btn2-border:rgba(255,255,255,.12);
  --card:#34495E;--shadow:0 2px 8px rgba(0,0,0,.35);--shadow-lift:0 12px 30px rgba(0,0,0,.4);
  --field:#2C3E50;--field-border:rgba(255,255,255,.28);--error:#F5A59C;--positive:#58D68D;
  --desk:#253545;--sig:#FFFFFF;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{flex:1 0 auto}
::selection{background:#88C5B1;color:#2C3E50}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);color:var(--heading);margin:0;text-wrap:balance;font-weight:700}
p{margin:0;text-wrap:pretty}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
a:hover{text-decoration-color:var(--taupe)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.desk :focus-visible{outline-color:var(--desk-accent)}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--desk-accent);color:#2C3E50;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:8px;border:1px solid transparent;font:600 15.2px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease-out),background-color .2s,border-color .2s,box-shadow .25s var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--btn2-bg);color:var(--btn2-fg);border-color:var(--btn2-border)}
.btn-secondary:hover{box-shadow:0 0 0 1px var(--btn2-fg) inset}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.link-arrow .icon{transition:transform .25s var(--ease-out)}
.link-arrow:hover .icon{transform:translateX(3px)}

/* ---------- the desk: header band shared by every page ---------- */
.desk{background:var(--desk);color:var(--desk-ink)}
.bar{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:20px;padding-bottom:20px}
.nav{display:flex;gap:clamp(18px,3vw,32px)}
.nav a{position:relative;padding:10px 0;color:var(--desk-muted);font-weight:500;font-size:15.2px;text-decoration:none;transition:color .2s}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--desk-accent);border-radius:1px}
.nav .short{display:none}
@media (max-width:520px){.nav .long{display:none}.nav .short{display:inline}}

/* page title inside the desk (samples, contact) */
.page-head{padding-top:clamp(24px,5vw,56px);padding-bottom:clamp(40px,6vw,72px)}
.page-head h1{color:#fff;font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.015em;max-width:20ch}
.page-head .lede{margin-top:18px;max-width:62ch;font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--desk-muted)}
.page-head .lede a{color:var(--desk-accent)}
.page-head .note{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#C2B2A9}
.page-head .note::before{content:"";width:18px;height:1px;background:currentColor}

/* ---------- home: the letter ---------- */
.home .desk{flex:1 0 auto;padding-bottom:clamp(32px,6vw,72px)}
/* home is all desk, so it keeps brand slate in dark mode too; other pages darken the band to separate it from the slate canvas */
.home{--desk:#2C3E50}
.figures + .cycles,.cycles{margin-top:14px;font-size:14px;color:var(--muted)}
.sheet{
  --paper:#FFFFFF;--p-ink:#1A1A1A;--p-muted:#6B6B6B;--p-head:#2C3E50;--p-accent:#2D6A5E;--p-line:#E8E8E8;
  --p-btn2-bg:#2C3E50;--p-btn2-fg:#7FBFAA;--sig:#2C3E50;--p-hover-mix:#000;
  position:relative;max-width:760px;margin:clamp(4px,2vw,24px) auto 0;background:var(--paper);color:var(--p-ink);border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 24px 60px -24px rgba(0,0,0,.45);
  padding:clamp(22px,5vw,56px) clamp(20px,6.5vw,68px) clamp(26px,5vw,52px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet{
  --paper:#34495E;--p-ink:#FFFFFF;--p-muted:#D0D0D0;--p-head:#FFFFFF;--p-accent:#88C5B1;--p-line:rgba(255,255,255,.14);
  --p-btn2-bg:#2C3E50;--p-btn2-fg:#88C5B1;--sig:#FFFFFF;--p-hover-mix:#FFF}}
.sheet a:not(.btn){color:var(--p-accent)}
.letterhead{display:flex;align-items:center;gap:clamp(14px,2.5vw,22px);padding-bottom:clamp(18px,2.5vw,24px);border-bottom:2px solid var(--p-accent)}
.letterhead h1{font-size:clamp(30px,4vw,40px);line-height:1.08;color:var(--p-head);letter-spacing:-.015em}
.letterhead .title{margin-top:6px;font-weight:500;font-size:15.2px;line-height:1.4;color:var(--p-accent)}
.letterhead .where{margin-left:auto;text-align:right;font-size:14px;line-height:1.65;color:var(--p-muted);white-space:nowrap}
.letter{padding-top:clamp(22px,3vw,30px)}
.letter .hello{font:600 clamp(20px,2.2vw,23px)/1.3 var(--serif);color:var(--p-head)}
.letter p:not(.hello){font-size:17px;line-height:1.75;max-width:60ch}
.letter p+p{margin-top:14px}
.letter .regards{margin-top:24px}
.sig{display:block;width:min(300px,72%);height:auto;margin:4px 0 0 -8px;color:var(--sig);overflow:visible}
.sig-pen path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:sig-draw var(--d) cubic-bezier(.4,.1,.6,.9) var(--t) forwards}
@keyframes sig-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sig-pen path{animation:none;stroke-dashoffset:0}}
.sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:26px;padding-top:24px;border-top:1px solid var(--p-line)}
.sheet .btn-primary{background:var(--p-accent);color:var(--paper)}
.sheet .btn-primary:hover{background:color-mix(in srgb,var(--p-accent) 86%,var(--p-hover-mix))}
.sheet .btn-secondary{background:var(--p-btn2-bg);color:var(--p-btn2-fg);border-color:rgba(255,255,255,.12)}
.sheet .li{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-weight:500;font-size:15.2px;text-decoration:none;padding:12px 0}
.sheet .li svg{width:18px;height:18px}
@media (max-width:640px){
  .letterhead{flex-wrap:wrap}
  .letterhead .where{flex-basis:100%;margin-left:0;text-align:left;white-space:normal}
  .letter p:not(.hello){font-size:16.5px;line-height:1.7}
  .sheet-actions .btn{flex:1 1 100%}
  .sheet .li{margin-left:0}
}
.letterhead .where .sep{display:none}
@media (max-width:640px){.letterhead .where br{display:none}.letterhead .where .sep{display:inline}}

/* ---------- samples ---------- */
.samples{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(24px,4vw,48px)}
.sample{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;scroll-margin-top:32px}
.sample+.sample{margin-top:clamp(56px,8vw,112px);padding-top:clamp(56px,8vw,112px);border-top:1px solid var(--border)}
.sample:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sample:nth-of-type(even) .shot{order:2}
.shot{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.shot img{width:100%;height:auto;aspect-ratio:16/10}
.sample h2{font-size:clamp(26px,3vw,32px);line-height:1.15}
.sample .service{margin-top:12px;color:var(--muted);max-width:46ch}
.sample .client{margin-top:22px;padding-top:18px;border-top:2px solid var(--rule);font-weight:600;color:var(--heading)}
.sample .client span{font-weight:400;color:var(--muted)}
.sample .what{margin-top:8px;max-width:50ch}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(16px,2.2vw,28px);margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--border)}
.figures div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}
.figures dt{font-size:13.5px;line-height:1.35;color:var(--muted)}
.figures dd{margin:0;font:700 clamp(21px,2.1vw,27px)/1.1 var(--serif);color:var(--heading);white-space:nowrap}
.sample-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:26px}
.tag{font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){
  .sample,.sample:nth-of-type(even){grid-template-columns:1fr}
  .sample:nth-of-type(even) .shot{order:0}
  .sample .shot{order:0}
}
@media (max-width:420px){.figures dd{font-size:20px}.figures dt{font-size:12.5px}}

/* closing call to action (samples, contact) */
.closing{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.closing-inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;padding-top:32px;border-top:2px solid var(--rule)}
.closing h2{font-size:clamp(26px,3vw,32px)}
.closing p{margin-top:10px;color:var(--muted);max-width:52ch}
.closing .row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,88px);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(48px,7vw,96px)}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:clamp(20px,4vw,40px)}
.form-card h2{font-size:clamp(24px,2.6vw,28px)}
.form-card .hint{margin-top:6px;color:var(--muted);font-size:15.2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:500;font-size:15px;color:var(--heading)}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);background:var(--field);border:1px solid var(--field-border);border-radius:8px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:170px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--error)}
.field .err{display:none;font-size:14px;color:var(--error)}
.field[data-invalid] .err{display:block}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:24px}
.form-foot .privacy{font-size:14px;color:var(--muted);max-width:40ch}
.cf-turnstile{margin-top:18px}
.status{margin-top:18px;font-size:15.2px}
.status:empty{display:none}
.status.is-error{padding:12px 16px;border-radius:8px;border:1px solid color-mix(in srgb,var(--error) 45%,transparent);color:var(--error)}
.status.is-error a{color:inherit}
.sent{text-align:left}
.sent h2{font-size:clamp(24px,2.6vw,28px)}
.sent p{margin-top:10px;color:var(--muted);max-width:52ch}
.sent .check{width:40px;height:40px;margin-bottom:18px;color:var(--accent)}
.aside h2{font-size:22px}
.reach{list-style:none;margin:16px 0 0;padding:0}
.reach li{padding:14px 0;border-top:1px solid var(--border)}
.reach li:last-child{border-bottom:1px solid var(--border)}
.reach a{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;word-break:break-word}
.reach small{display:block;font-size:13.5px;color:var(--muted);margin-bottom:2px}
.facts{margin:32px 0 0;display:grid;gap:16px}
.facts div{display:grid;gap:2px}
.facts dt{font-size:13.5px;color:var(--muted)}
.facts dd{margin:0}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.fields{grid-template-columns:1fr}.form-foot .btn{flex:1 1 100%}}

/* ---------- footer ---------- */
.foot{padding-top:28px;padding-bottom:32px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px}
.foot-row nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .disclaimer{margin-top:12px;max-width:80ch}
.home .foot{border-top-color:var(--desk-line);background:var(--desk);color:var(--desk-muted)}
.home .foot a{color:var(--desk-accent)}

/* 404 */
.lost{padding-top:clamp(40px,8vw,96px);padding-bottom:clamp(48px,8vw,120px)}
.lost p{margin-top:14px;color:var(--muted)}
.lost .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}