/* Delfone Home — shared stylesheet
   Dark-grey theme, Apple system typography (SF Pro via -apple-system).
   Every colour painted explicitly. */

:root{
  --bg:#2B2B2D;
  --bg-2:#232325;
  --panel:#343437;
  --panel-2:#3C3C40;
  --line:#454549;
  --line-2:#57575C;
  --text:#FFFFFF;
  --text-2:#C6C6CA;
  --text-3:#94949A;
  --gold:#C9A86C;
  --gold-dim:#A98A52;

  /* Apple's own stack: renders SF Pro on Apple devices, Segoe/Roboto elsewhere */
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
       "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
       Helvetica, Arial, sans-serif;

  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:116px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f);
  font-size:17px;
  font-weight:400;
  line-height:1.52;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px;}
h1,h2,h3,h4{margin:0;color:var(--text);font-weight:600;letter-spacing:-.018em;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
[hidden]{display:none !important;}
.num{font-variant-numeric:tabular-nums;}

.kicker{font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--gold);}

.more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:16px;font-weight:400;color:var(--gold);letter-spacing:-.01em;
}
.more::after{content:"\203A";font-size:19px;line-height:1;position:relative;top:-1px;}
.more:hover{text-decoration:underline;text-underline-offset:3px;}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}

/* ---- template notice ---- */
.notice{background:#37322A;color:#E3C68A;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;}
.notice .wrap{padding-block:10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.notice b{font-weight:600;color:var(--gold);}

/* ---- masthead ---- */
header{background:rgba(43,43,45,.88);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;}
.brandbar{display:flex;align-items:center;justify-content:center;padding-block:18px 12px;position:relative;}
.mark{text-align:center;}
.mark .w{font-size:23px;font-weight:500;letter-spacing:.3em;text-indent:.3em;line-height:1;color:var(--text);}
.mark .s{display:block;margin-top:7px;font-size:11px;font-weight:400;letter-spacing:.02em;color:var(--text-3);}
.utility{position:absolute;right:24px;top:50%;transform:translateY(-50%);}
.lang{
  font-family:var(--f);font-size:13px;font-weight:400;
  color:var(--text-2);background:transparent;border:1px solid var(--line-2);
  border-radius:999px;padding:5px 11px;
}
.lang option{background:var(--bg);color:var(--text);}
nav ul{display:flex;justify-content:center;list-style:none;margin:0;padding:0 0 13px;overflow-x:auto;scrollbar-width:none;}
nav ul::-webkit-scrollbar{display:none;}
nav li{padding-inline:19px;white-space:nowrap;}
nav a{font-size:14px;font-weight:400;color:var(--text-2);letter-spacing:-.005em;}
nav a:hover{color:var(--text);}
nav a.on{color:var(--gold);font-weight:500;}
@media(max-width:760px){
  .utility{right:16px;}
  .mark .w{font-size:19px;}
  nav li{padding-inline:13px;}
}

/* ---- cinematic panel ---- */
.panel{position:relative;border-bottom:1px solid var(--line);}
.panel .img{
  position:relative;min-height:520px;display:flex;align-items:flex-end;
  background-color:var(--panel);
  background-image:radial-gradient(120% 90% at 78% 18%, #4B4B51 0%, #2F2F33 46%, #1D1D20 100%);
}
.panel .img::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(to top,  rgba(0,0,0,.80) 0%, rgba(0,0,0,.36) 38%, rgba(0,0,0,0) 68%),
    linear-gradient(to right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.14) 44%, rgba(0,0,0,0) 68%);
}
.panel.hero .img{min-height:min(74vh,640px);}
.panel .ghost{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:12px;color:#6C6C72;text-align:center;line-height:1.9;letter-spacing:.04em;
}
.panel .copy{position:relative;z-index:2;text-shadow:0 1px 20px rgba(0,0,0,.55);padding:0 0 62px;max-width:var(--maxw);margin:0 auto;width:100%;padding-inline:24px;}
.panel .en{font-size:19px;color:#E7E7EA;line-height:1.42;margin-bottom:14px;font-weight:400;}
.panel h1,.panel h2{
  font-size:clamp(40px,6.2vw,72px);line-height:1.04;letter-spacing:-.025em;
  font-weight:600;margin-bottom:26px;
}
.panel .cat{display:block;font-size:14px;font-weight:600;color:#E8CB93;margin-bottom:12px;letter-spacing:-.005em;}
@media(max-width:720px){
  .panel .img{min-height:400px;}
  .panel .copy{padding-bottom:44px;}
  .panel .en{font-size:17px;}
}

/* page hero — shorter banner for interior pages */
.phero{border-bottom:1px solid var(--line);background:var(--bg-2);position:relative;}
.phero .wrap{padding-block:74px 62px;}
/* with photography behind it */
.phero.shot{background-size:cover;background-position:center;background-color:var(--panel);}
.phero.shot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,  rgba(0,0,0,.84) 0%, rgba(0,0,0,.46) 48%, rgba(0,0,0,.22) 100%),
    linear-gradient(to right, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 50%, rgba(0,0,0,0) 76%);
}
.phero.shot .wrap{position:relative;z-index:2;padding-block:118px 96px;text-shadow:0 1px 20px rgba(0,0,0,.55);}
.phero.shot p{color:#E7E7EA;}
@media(max-width:720px){.phero.shot .wrap{padding-block:76px 60px;}}
.phero h1{font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-.024em;margin:12px 0 18px;}
.phero p{color:var(--text-2);font-size:19px;line-height:1.47;max-width:60ch;}

/* ---- content section ---- */
section.body{padding-block:78px;border-bottom:1px solid var(--line);background:var(--bg);}
section.body.alt{background:var(--bg-2);}
.shead{max-width:60ch;margin-bottom:46px;}
.shead h2{font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.022em;margin:12px 0 16px;}
.shead p{color:var(--text-2);font-size:19px;line-height:1.47;}

/* ---- spec rows ---- */
.specs{border-top:1px solid var(--line);}
.srow{display:grid;grid-template-columns:190px 1fr;gap:6px 28px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;}
.srow .k{font-size:13px;font-weight:600;color:var(--text-3);padding-top:3px;letter-spacing:-.005em;}
.srow .v{color:var(--text-2);line-height:1.55;}
.srow .v b{color:var(--text);font-weight:600;}
@media(max-width:760px){.srow{grid-template-columns:1fr;}.srow .k{padding-top:0;}}

.series{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;}
.series span{font-size:14px;border:1px solid var(--line-2);color:var(--text-2);padding:6px 15px;border-radius:999px;}

/* ---- plants / cards ---- */
.plants{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.plant{background:var(--bg);padding:30px 26px 32px;display:flex;flex-direction:column;}
section.body.alt .plant{background:var(--bg-2);}
.plant .n{font-size:13px;font-weight:600;color:var(--gold);margin-bottom:10px;}
.plant h3{font-size:24px;margin-bottom:12px;letter-spacing:-.018em;}
.plant p{font-size:16px;color:var(--text-2);line-height:1.55;margin-bottom:20px;}
.plant dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 22px;font-size:15px;border-top:1px solid var(--line);padding-top:14px;}
.plant dt{color:var(--text-3);}
.plant dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);}
.plant .foot{margin-top:auto;}
@media(max-width:880px){.plants{grid-template-columns:1fr;}}

/* ---- process ---- */
.proc{border-top:1px solid var(--line);}
.pstep{display:grid;grid-template-columns:70px 1fr 250px;gap:10px 32px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start;}
.pstep .n{font-size:30px;font-weight:600;color:var(--gold);line-height:1.1;letter-spacing:-.02em;}
.pstep h3{font-size:24px;margin-bottom:11px;letter-spacing:-.018em;}
.pstep p{font-size:17px;color:var(--text-2);max-width:56ch;line-height:1.5;}
.pside{border-left:1px solid var(--line);padding-left:24px;}
.pside .k{font-size:12px;font-weight:600;color:var(--text-3);display:block;margin-bottom:4px;}
.pside .t{font-size:15px;color:var(--text);margin-bottom:16px;font-variant-numeric:tabular-nums;}
.pside ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--text-2);}
.pside li{padding:3px 0;display:flex;gap:9px;line-height:1.5;}
.pside .d{color:var(--gold-dim);flex:none;}
@media(max-width:1020px){
  .pstep{grid-template-columns:52px 1fr;}
  .pstep .n{font-size:24px;}
  .pside{grid-column:2;border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px;margin-top:18px;}
}

/* ---- table ---- */
.tscroll{overflow-x:auto;border:1px solid var(--line);background:var(--panel);border-radius:10px;}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:15px;}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--text-2);}
th{font-size:13px;color:var(--text-3);font-weight:600;white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
td:first-child{color:var(--text);white-space:nowrap;font-weight:500;}
.std{color:var(--gold);}

.note{border-left:3px solid var(--gold);background:var(--panel);padding:20px 24px;margin-top:34px;font-size:16px;color:var(--text-2);line-height:1.55;border-radius:0 10px 10px 0;}
.note b{display:block;color:var(--text);font-weight:600;margin-bottom:5px;}

/* ---- story / figures / milestones ---- */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-bottom:56px;}
.story .lead{font-size:28px;font-weight:600;line-height:1.22;letter-spacing:-.02em;margin-bottom:22px;color:var(--text);}
.story p{color:var(--text-2);margin-bottom:16px;max-width:56ch;font-size:17px;line-height:1.55;}
.story p:last-child{margin-bottom:0;}
.story b{color:var(--text);font-weight:600;}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.figc{background:var(--bg);padding:24px 22px 26px;}
section.body.alt .figc{background:var(--bg-2);}
.figc .v{font-size:clamp(30px,3.6vw,40px);font-weight:600;line-height:1.05;margin-bottom:8px;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text);}
.figc .k{font-size:14px;color:var(--text-3);line-height:1.4;}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:36px;}}

.miles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:48px;}
.mile{background:var(--bg);padding:24px 22px;}
section.body.alt .mile{background:var(--bg-2);}
.mile .y{font-size:26px;font-weight:600;color:var(--gold);margin-bottom:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.mile p{font-size:15px;color:var(--text-2);line-height:1.5;}
@media(max-width:1000px){.miles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.miles{grid-template-columns:1fr;}}

.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;}
.certs h3{font-size:14px;color:var(--gold);margin-bottom:14px;font-weight:600;}
.certs ul{list-style:none;margin:0;padding:0;font-size:16px;border-top:1px solid var(--line);}
.certs li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--text);}
.certs li span{text-align:right;font-size:14px;color:var(--text-3);}
@media(max-width:760px){.certs{grid-template-columns:1fr;gap:34px;}}

/* ---- audiences ---- */
.auds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.aud{background:var(--bg);padding:30px 26px 32px;display:flex;flex-direction:column;}
section.body.alt .aud{background:var(--bg-2);}
.aud h3{font-size:24px;margin-bottom:11px;letter-spacing:-.018em;}
.aud p{font-size:16px;color:var(--text-2);margin-bottom:18px;line-height:1.5;}
.aud ul{list-style:none;margin:0 0 24px;padding:0;font-size:15px;border-top:1px solid var(--line);}
.aud li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;color:var(--text-2);line-height:1.5;}
.aud li:last-child{border-bottom:none;}
.aud .d{color:var(--gold-dim);flex:none;}
.aud .foot{margin-top:auto;}
@media(max-width:900px){.auds{grid-template-columns:1fr;}}

/* ---- projects ---- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.proj .ph{
  aspect-ratio:3/2;border:1px solid var(--line);margin-bottom:16px;border-radius:12px;
  display:grid;place-items:center;text-align:center;padding:18px;
  background-color:var(--panel);
  background-image:radial-gradient(110% 90% at 70% 25%, #45454A 0%, #333337 55%, #28282A 100%);
}
.proj .ph span{font-size:12px;color:#7A7A80;line-height:1.9;letter-spacing:.04em;}
.proj h3{font-size:21px;margin-bottom:6px;letter-spacing:-.018em;}
.proj .meta{font-size:14px;color:var(--text-3);line-height:1.45;}
.proj .scope{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}
.dot{font-size:12px;padding:3px 10px;border:1px solid var(--line-2);color:var(--text-3);border-radius:999px;}
@media(max-width:900px){.projects{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.projects{grid-template-columns:1fr;}}

/* ---- contact ---- */
.contact{background:var(--bg-2);padding-block:78px;border-bottom:1px solid var(--line);}
.contact .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
.contact h2{font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.022em;margin:12px 0 18px;}
.contact .lede{color:var(--text-2);font-size:19px;line-height:1.47;margin-bottom:30px;}
.ways{list-style:none;padding:0;margin:0;font-size:16px;border-top:1px solid var(--line);}
.ways li{padding:14px 0;border-bottom:1px solid var(--line);}
.ways .k{display:block;font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:3px;}

.form{border:1px solid var(--line);padding:32px 30px;background:var(--bg);border-radius:14px;}
.form h3{font-size:23px;margin-bottom:8px;letter-spacing:-.018em;}
.form .fsub{font-size:16px;color:var(--text-2);margin-bottom:26px;line-height:1.5;}
.fgridd{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px;font-weight:600;color:var(--text-3);}
.field input,.field select,.field textarea{
  font-family:var(--f);font-size:16px;font-weight:400;padding:11px 0;letter-spacing:-.01em;
  border:none;border-bottom:1px solid var(--line-2);background:transparent;color:var(--text);width:100%;
}
.field option{background:var(--bg);color:var(--text);}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold);}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-family:var(--f);font-size:15px;font-weight:400;letter-spacing:-.01em;
  padding:8px 16px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);
  cursor:pointer;border-radius:999px;
}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);}
.submit{
  font-family:var(--f);font-size:16px;font-weight:500;letter-spacing:-.01em;
  background:var(--gold);color:#231C0E;border:none;padding:13px 26px;cursor:pointer;
  margin-top:26px;border-radius:999px;
}
.submit:hover{background:#D9BB82;}
#formMsg{font-size:15px;color:var(--gold);margin-top:16px;}
@media(max-width:900px){.contact .wrap{grid-template-columns:1fr;gap:40px;}}
@media(max-width:520px){.fgridd{grid-template-columns:1fr;}}

/* ---- next-page rail ---- */
.next{background:var(--bg);border-bottom:1px solid var(--line);}
.next .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:34px;flex-wrap:wrap;}
.next .k{font-size:13px;font-weight:600;color:var(--text-3);display:block;margin-bottom:2px;}
.next .t{font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.02em;}

/* ---- footer ---- */
footer{background:var(--bg-2);padding-block:52px 40px;}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line);}
footer h4{font-size:13px;color:var(--text-3);margin:0 0 14px;font-weight:600;letter-spacing:-.005em;}
footer ul{list-style:none;margin:0;padding:0;font-size:15px;}
footer li{margin-bottom:9px;}
footer a{color:var(--text-2);}
footer a:hover{color:var(--gold);}
.fbot{padding-top:24px;font-size:13px;color:var(--text-3);line-height:1.65;}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;}}

/* ---- real photography ---- */
.panel .img{background-size:cover;background-position:center;}

/* full-bleed image at the top of a card (cards have 30px/26px padding) */
.plant .ph{margin:-30px -26px 22px;aspect-ratio:16/9;overflow:hidden;background:var(--panel);}
.plant .ph img{width:100%;height:100%;object-fit:cover;display:block;}

.proj .ph{padding:0;overflow:hidden;background:var(--panel);}
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* paired figures */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.duo figure{margin:0;}
.duo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.duo figcaption{font-size:14px;color:var(--text-3);margin-top:10px;line-height:1.45;}
@media(max-width:760px){.duo{grid-template-columns:1fr;}}


/* ---- form: spam guard, notes, messages ---- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.fnote{font-size:13px;color:var(--text-3);margin-top:16px;line-height:1.5;}
.fnote a{color:var(--gold);}
#formMsg{font-size:15px;color:var(--gold);margin-top:16px;line-height:1.5;}
#formMsg.bad{color:#E2A07C;}
#formMsg a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.submit:disabled{opacity:.55;cursor:default;}
.form{position:relative;}

/* kicker must win over .shead p / .story p, which set their own colour and size */
.shead .kicker,.story .kicker,.contact .kicker,p.kicker{
  font-size:14px;font-weight:600;line-height:1.4;color:var(--gold);
  margin:0 0 6px;letter-spacing:-.005em;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto;}}