@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { color-scheme: light dark; --bg:#f1f0eb; --surface:#e8e6df; --surface-2:#ddd9cf; --ink:#171817; --muted:#65665f; --line:#c9c6bd; --accent:#f15a3b; --accent-2:#3958b8; --wash:#fffdf8; --shadow:0 18px 45px rgba(24,25,22,.10); --ht-bg:#0992E9; --ht-text:#fff; --ht-text-muted:rgba(255,255,255,0.9); --ht-text-dim:rgba(255,255,255,0.8); --ht-card-bg:#fff; --ht-card-text:#171817; --ht-card-muted:#65665f; --ht-card-border:#eee; --ht-button-bg:#fff; --ht-button-text:#0992E9; --ht-button-hover-bg:#f0f0f0; --ht-button-hover-text:#0992E9; --ht-card-backdrop:rgba(0,0,0,0.1); --ht-avatar-bg:#0992E9; --ht-avatar-text:#fff; }
:root[data-theme="dark"] { --bg:#101216; --surface:#181b21; --surface-2:#20242b; --ink:#f4f1e8; --muted:#afb0ac; --line:#343a43; --accent:#ff7355; --accent-2:#98adff; --wash:#14171c; --shadow:0 22px 60px rgba(0,0,0,.35); --ht-bg:#073b61; --ht-text:var(--ink); --ht-text-muted:var(--muted); --ht-text-dim:rgba(244,241,232,0.7); --ht-card-bg:var(--surface); --ht-card-text:var(--ink); --ht-card-muted:var(--muted); --ht-card-border:var(--line); --ht-button-bg:#0992E9; --ht-button-text:#fff; --ht-button-hover-bg:#077abf; --ht-button-hover-text:#fff; --ht-card-backdrop:rgba(0,0,0,0.3); --ht-avatar-bg:var(--surface-2); --ht-avatar-text:#0992E9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.11; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.skip-link { position:fixed; top:12px; left:12px; padding:10px 14px; background:var(--ink); color:var(--bg); transform:translateY(-160%); transition:transform .2s; z-index:20; }
.skip-link:focus { transform:translateY(0); }
.site-header { width:min(1280px, calc(100% - 64px)); margin:auto; min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand img,.footer-brand img { display:block; width:auto; height:40px; }
nav { display:flex; gap:30px; margin-left:auto; font:500 12px/1 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
nav a { position:relative; padding:9px 0; } nav a:after { content:""; position:absolute; height:1px; background:var(--accent); bottom:4px; left:0; right:100%; transition:right .2s; } nav a:hover:after,nav a:focus-visible:after { right:0; }
.theme-toggle { appearance:none; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:99px; padding:9px 12px; display:flex; gap:7px; align-items:center; cursor:pointer; font:500 11px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.theme-toggle:hover { background:var(--surface); } .theme-icon { font-size:18px; line-height:10px; }
.hero,.section,footer { width:min(1280px, calc(100% - 64px)); margin:auto; }
.hero { min-height:690px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:80px; padding:82px 44px 88px; }
.eyebrow { margin:0 0 20px; font:500 11px/1.2 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.status-dot,.mini-dot { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.055em; }
h1 { max-width:700px; margin-bottom:25px; font:600 clamp(3.8rem, 7.1vw, 6.8rem)/.94 "Playfair Display", Georgia, serif; } h1 em { color:var(--accent); }
.lede { max-width:555px; color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:35px 0 46px; }
.button { display:inline-flex; align-items:center; gap:19px; min-height:48px; padding:0 18px; border:1px solid var(--line); font:500 12px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); } .button-primary { border-color:var(--accent); background:var(--accent); color:#fffaf5; } .button-quiet:hover { background:var(--surface); }
.availability { display:flex; gap:11px; align-items:center; color:var(--muted); font-size:13px; }.availability span { color:var(--ink); font:500 11px "DM Mono",monospace; text-transform:uppercase; }
.portrait-wrap { position:relative; width:min(100%,455px); justify-self:end; padding:20px 20px 44px 0; }
.portrait-frame { position:relative; height:530px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); z-index:1; } .portrait-frame:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 65%, rgba(57,88,184,.22)); mix-blend-mode:multiply; pointer-events:none; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:none; }
.portrait-halo { position:absolute; width:92%; height:70%; border:1px solid var(--accent); left:-28px; top:-22px; z-index:0; }
.portrait-note { position:absolute; z-index:2; bottom:7px; right:-22px; background:var(--wash); border:1px solid var(--line); padding:11px 13px; font:500 10px/1.25 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; box-shadow:var(--shadow); }.mini-dot { background:var(--accent-2); box-shadow:none; width:6px;height:6px; }
.section { padding:115px 44px; border-top:1px solid var(--line); }.section-heading { max-width:680px; margin-bottom:48px; }.section-heading h2,.about h2 { margin-bottom:16px; font:600 clamp(2.5rem,4.8vw,4.5rem)/.98 "Playfair Display",Georgia,serif; }.section-heading > p:last-child { max-width:550px; margin-bottom:0; color:var(--muted); font-size:17px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.project { min-height:550px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); overflow:hidden; transition:transform .25s, box-shadow .25s; }.project:hover { transform:translateY(-6px); box-shadow:var(--shadow); }.project-cup { background:#f5ede0; color:#1d2721; }.project-xyx { background:#101931; color:#f8f5f0; border-color:#24325c; }.project-slice { background:linear-gradient(rgba(120,53,15,0.7),rgba(120,53,15,0.7)), url('assets/slice_of_heaven.pattern.webp') center/cover, #78350F; background-blend-mode:multiply; color:#fff5ea; border-color:#9f4d1e; }.project-spirit { background:#2F170F; color:#ffebe3; border-color:#4d2618; }.project-oli { background:#1e2e1e; color:#e4ffe4; border-color:#365236; }.project-newport { background:#4a1212; color:#ffebeb; border-color:#7a1d1d; }.project-wint { background:#0a1c3a; color:#e0e8ff; border-color:#1c4b82; }.project-kaylie { background:#f9f6f0; color:#3a4b40; border-color:#d5dcd2; }.project-topline { display:flex; justify-content:space-between; gap:16px; font:500 10px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }.project-topline a { text-decoration:underline; text-underline-offset:3px; }
.project-logo-wrap { margin:auto 0; display:flex; align-items:center; min-height:220px; }.project-logo { display:block; }.cup-logo-wrap { justify-content:center; }.cup-logo { width:min(190px,48%); height:auto; filter:drop-shadow(0 14px 13px rgba(124,45,18,.18)); }.xyx-logo-wrap { justify-content:center; }.xyx-logo { width:min(100%,360px); height:auto; }
.project-copy { max-width:430px; }.project-type { margin-bottom:9px; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }.project h3 { margin-bottom:8px; font:600 34px/1 "Playfair Display",Georgia,serif; letter-spacing:-.04em; }.project-copy > p:last-child { margin-bottom:0; opacity:.76; line-height:1.55; }.tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:28px 0 0; list-style:none; }.tags li { padding:6px 8px; border:1px solid currentColor; border-radius:99px; font:500 9px/1 "DM Mono",monospace; text-transform:uppercase; opacity:.75; }
.spirit-stacked-logo { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; margin:20px 0; }
.spirit-cursive { width:100%; max-width:280px; height:auto; object-fit:contain; }
.spirit-photo { width:100%; max-width:220px; height:auto; border-radius:8px; border:2px solid rgba(255,255,255,0.15); box-shadow:0 8px 16px rgba(0,0,0,0.4); object-fit:cover; }
.spirit-the-band { width:100%; max-width:140px; height:auto; object-fit:contain; margin-top:-4px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.slice-logo-wrap::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 0 80px 60px #fff, 0 0 160px 100px rgba(255,255,255,0.9), 0 0 240px 150px rgba(255,255,255,0.5); z-index:1; pointer-events:none; }
.carousel-container { position:relative; display:flex; align-items:center; margin: 0 -16px; padding: 0 16px; }
.carousel-btn { position:absolute; z-index:10; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.carousel-btn:hover { background:var(--ink); color:var(--bg); transform:translateY(-50%) scale(1.05); }
.carousel-btn.prev { left:-24px; }
.carousel-btn.next { right:-24px; }
.carousel-viewport { overflow: hidden; width: 100%; position: relative; }
.project-grid.carousel { display:flex; flex-wrap:nowrap; gap:24px; padding:20px 4px; margin:-20px -4px; }
.project-grid.carousel .project { flex:0 0 calc(50% - 12px); min-width:320px; }
.newport-logo-text { font-family:"Playfair Display", Georgia, serif; font-size:42px; font-weight:700; color:#fff; display:flex; flex-direction:column; line-height:1; }
.newport-logo-text span { color:var(--accent-2); font-size:64px; }
.wint-logo-wrap { justify-content:center; }
.wint-logo-text { font-family:"DM Sans", Arial, sans-serif; font-size:42px; font-weight:700; color:#fff; display:flex; flex-direction:column; line-height:1; text-align:center; }
.wint-logo-text span { color:#ff66ff; font-size:64px; font-weight:800; letter-spacing:-0.05em; }
.kaylie-logo-wrap { justify-content:center; }
.kaylie-logo-text { font-family:"Playfair Display", Georgia, serif; font-size:36px; font-weight:400; color:#4a5c50; display:flex; flex-direction:column; line-height:1.1; text-align:center; font-style:italic; }
.kaylie-logo-text span { color:#829b8c; font-size:52px; font-weight:600; font-style:normal; }
.about-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:10%; }.about-layout h2 { margin-bottom:0; }.about-layout p { color:var(--muted); font-size:17px; line-height:1.65; }.text-link { display:inline-flex; gap:10px; margin-top:12px; padding-bottom:4px; border-bottom:1px solid var(--accent); font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.compact { margin-bottom:38px; }.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principles article { min-height:260px; padding:26px 28px 20px 0; border-right:1px solid var(--line); }.principles article+article { padding-left:28px; }.principles article:last-child { border-right:0; }.principles span { color:var(--accent); font:500 11px "DM Mono",monospace; }.principles h3 { margin:50px 0 10px; font:600 25px/1.05 "Playfair Display",Georgia,serif; letter-spacing:-.035em; }.principles p { max-width:300px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }

/* HelloTech Section */
.ht-ad-section { background-color:var(--ht-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M0,300 C480,600 960,0 1440,300 L1440,600 L0,600 Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M0,400 C480,700 960,100 1440,400 L1440,600 L0,600 Z'%3E%3C/path%3E%3C/svg%3E"); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--ht-text); padding:60px 0; margin:80px 0; border-top:none; width:100%; max-width:none; transition: background-color 0.3s; position:relative; }
.ht-ad-section .hellotech-layout { width:min(1280px, calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; position:relative; z-index:2; }
.ht-logo-link { display:inline-block; }
.ht-logo-ad { border-radius:6px; margin-bottom:16px; box-shadow:0 4px 8px rgba(0,0,0,0.1); display:block; object-fit:contain; background:#fff; padding:8px 14px; width:160px; height:auto; transition: transform 0.2s, box-shadow 0.2s; }
.ht-logo-ad:hover { transform: translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.15); }
.ht-ad-section h2 { color:var(--ht-text); font-size:clamp(1.4rem,2.5vw,1.8rem); line-height:1.2; letter-spacing:-.01em; margin-bottom:8px; font-weight:700; font-family:"Playfair Display",Georgia,serif; }
.ht-title-static { opacity:0.9; }
.ht-title-dynamic-wrap { display:inline-block; vertical-align:bottom; min-width:160px; overflow:hidden; position:relative; margin-left: 6px; }
.ht-title-dynamic { display:inline-block; transition:opacity 0.5s ease, transform 0.5s ease; white-space:nowrap; }
.ht-subtitle { color:var(--ht-text); font-size:18px; line-height:1.4; margin-bottom:24px; font-weight:500; font-family:"Playfair Display",Georgia,serif; }
.ht-ad-section p { color:var(--ht-text-muted); font-size:15px; line-height:1.5; max-width:460px; margin-bottom:16px; }
.ht-ad-section strong { color:var(--ht-text); font-weight:700; }
.ht-ad-section .ht-stats { display:flex; gap:24px; margin:16px 0 24px; }
.ht-ad-section .ht-stat { display:flex; flex-direction:column; gap:2px; }
.ht-ad-section .ht-stat-value { font-size:32px; font-weight:700; font-family:"Playfair Display",Georgia,serif; color:var(--ht-text); line-height:1; display:flex; align-items:center; gap:4px; }
.ht-ad-section .ht-star { color:#FFC107; font-size:18px; }
.ht-ad-section .ht-stat-label { font-size:11px; font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--ht-text-dim); }
.ht-button-ad.button { background:var(--ht-button-bg); color:var(--ht-button-text); border-color:var(--ht-button-bg); font-weight:700; font-size:13px; padding:0 20px; min-height:42px; border-radius:4px; }
.ht-button-ad.button:hover { background:var(--ht-button-hover-bg); border-color:var(--ht-button-hover-bg); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.15); color:var(--ht-button-hover-text); }
.ht-ad-section .hellotech-card-wrap { position:relative; z-index:1; }
.ht-ad-section .hellotech-card-wrap::before { content:""; position:absolute; inset:-12px -12px -20px 12px; background:var(--ht-card-backdrop); border-radius:16px; z-index:-1; }
.ht-ad-section .ht-card { background:var(--ht-card-bg); color:var(--ht-card-text); border:none; border-radius:12px; padding:24px; box-shadow:0 12px 32px rgba(0,0,0,0.15); }
.ht-ad-section .ht-card-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ht-ad-section .ht-avatar { width:44px; height:44px; background:var(--ht-avatar-bg); color:var(--ht-avatar-text); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; letter-spacing:1px; }
.ht-ad-section .ht-card-header h3 { margin:0; font-size:18px; line-height:1.2; color:var(--ht-card-text); }
.ht-ad-section .ht-location { margin:0; font-size:13px; color:var(--ht-card-muted); }
.ht-ad-section .ht-review { padding-top:16px; border-top:1px solid var(--ht-card-border); margin-top:16px; }
.ht-ad-section .ht-review:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.ht-ad-section .ht-stars-ad { color:#FFC107; font-size:14px; letter-spacing:1px; margin-bottom:8px; }
.ht-ad-section .ht-review blockquote { margin:0 0 8px; font-size:14px; font-style:italic; line-height:1.5; color:var(--ht-card-text); opacity:0.9; }
.ht-ad-section .ht-review cite { font-size:12px; font-weight:600; color:var(--ht-card-muted); font-style:normal; }
.ht-ad-section .ht-review cite span { opacity:0.6; font-weight:400; }
.ht-partners { margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15); }
.ht-partners-title { font-size:11px; font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--ht-text-dim); margin:0 0 16px; }
.ht-partners-logos { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.ht-partners-logos img { height:24px; width:auto; max-width:100px; object-fit:contain; opacity:0.8; filter:brightness(0) invert(1); transition:opacity 0.2s; }
.ht-partners-logos img:hover { opacity:1; }

footer { display:grid; grid-template-columns:1fr 1.3fr auto; align-items:center; gap:30px; padding:35px 44px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }footer p { margin:0; }.footer-brand img { height:32px; }.footer-email { color:var(--ink); font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }.copyright { grid-column:1/-1; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }.copyright-text { font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.not-found { min-height:80vh; display:grid; place-items:center; text-align:center; }.not-found-title { font-size:clamp(3rem,9vw,7rem); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } @media (max-width:800px) { .site-header,.hero,.section,footer { width:min(100% - 40px, 680px); }.site-header { min-height:80px; }.brand img { height:32px; }nav { display:none; }.hero { grid-template-columns:1fr; padding:66px 0 70px; gap:54px; min-height:0; }.portrait-wrap { width:min(100%,430px); justify-self:start; margin-left:12px; }.portrait-frame { height:min(112vw,530px); }.project-grid,.about-layout,.hellotech-layout { grid-template-columns:1fr; }.hellotech-layout { gap: 40px; }.project-grid.carousel .project { flex:0 0 100%; }.section { padding:76px 0; }.principles { grid-template-columns:1fr; }.principles article,.principles article+article { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }.principles h3 { margin-top:28px; }.principles article:last-child { border-bottom:0; }footer { grid-template-columns:1fr; padding:30px 0; gap:16px; }.copyright { margin-top:8px; } }
@media (max-width:450px) { .site-header,.hero,.section,footer { width:calc(100% - 32px); }.theme-label { display:none; }.theme-toggle { padding:10px; }.hero { padding-top:48px; }h1 { font-size:3.35rem; }.project { min-height:480px; padding:20px; }.project-topline { font-size:9px; }.project-logo-wrap { min-height:185px; }.cup-logo { width:150px; }.section-heading h2,.about h2 { font-size:2.55rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.skip-link,.button,nav a:after,.project { transition:none; } }